67P/hyperchannel

@mixin app-column() {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  justify-content: flex-start;

  header {
    flex: 0 0 $headerHeight;
    position: relative;
  }
  .main {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  footer {
    flex: 0 0 $headerHeight;
    position: relative;
  }
}

.app-container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  -webkit-overflow-scrolling: none;
  display: flex;
  align-items: stretch;
  flex-direction: row;
  justify-content: flex-start;
}

#global {
  overflow: hidden;

  header {
    &#sitename {
      padding: 0 1em;
      h1 {
        height: $headerHeight;
        line-height: $headerHeight;
        text-transform: uppercase;
      }
    }
  }
}

@media screen and (min-width: 900px) {
  #global {
    flex: 0 0 $sidebarWidth;
    @include app-column;
  }
}

@media screen and (max-width: 900px) {
  #global {
    @apply z-10;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 168px;
    transform: translate3d(-168px, 0, 0);
    transition: transform 0.4s;

    .main {
      position: absolute;
      width: $sidebarWidth;
      top: $headerHeight;
      bottom: $headerHeight;
    }

    footer {
      position: absolute;
      width: $sidebarWidth;
      bottom: 0;
    }
  }
}

div#channel {
  flex: 1;

  display: flex;
  align-items: stretch;
  flex-direction: row;
  justify-content: flex-start;

  transform: none;
  transition: transform 0.4s;
  overflow: auto;
  overflow-wrap: break-word;

  main {
    @include app-column;
    flex: 1;
    overflow: auto;

    .content-container {
      flex: 1;
      display: flex;
      align-items: stretch;
      flex-direction: row;
      justify-content: flex-start;
      overflow: hidden;

      > .content {
        @apply z-10;
        flex: 1;
        @include app-column;

        @include media("<desktop") {
          transition: transform 0.4s;
        }
      }

      > aside {
        @include app-column;

        @include media(">desktop") {
          flex: 0 0 $sidebarWidth;
          transition: flex 0.4s;
        }

        @include media("<desktop") {
          @apply z-0;
          flex: 0;
          position: absolute;
          top: $headerHeight;
          right: 0;
          bottom: 0;
          width: $sidebarWidth;
          transform: translate3d($sidebarWidth, 0, 0);
          transition: transform 0.4s;
        }
      }

      &.channel-menu-open {
        > .content {
          transform: translate3d(-$sidebarWidth, 0, 0);
        }

        > aside {
          transform: translate3d(0, 0, 0);
        }
      }

      &.sidebar-wide {
        > aside {
          @include media(">desktop") {
            flex: 0 0 $sidebarWideWidth;
          }

          @include media("<desktop") {
            width: 100vw;
            transform: translate3d($sidebarWideWidth, 0, 0);
          }
        }

        &.channel-menu-open {
          > .content {
            transform: translate3d(-100vw, 0, 0);
          }

          > aside {
            transform: translate3d(0, 0, 0);
          }
        }
      }
    }
  }
}

section#settings, section#space {
  flex: 1;
  overflow: auto;
}

.app-container.global-menu-open {
  #global {
    transform: none;
    transition: transform 0.4s;
  }
  div#channel {
    transform: translate3d(168px, 0, 0);
    transition: transform 0.4s;
  }
}

header, footer {
  nav {
    button {
      border: none;
      color: #fff;
    }

    a, button {
      display: flex;
      float: left;
      align-items: center;
      justify-content: center;
      height: $headerHeight;
      width: $headerHeight;
      text-align: center;
      text-decoration: none;

      &:hover {
        background-color: rgba(255,255,255,0.2);
      }

      svg {
        width: 14px;
        height: 14px;
      }
    }
  }
}