nav {
  &.sidebar {
    transition: $transition-base;
    float: left;
    background-color: $primary;
    height: 100vh;
    padding: 15px;

    * {
      color: $light;
    }

    button {
      &.bottom {
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    &.primary {
      width: $primary-sidebar-width;
      text-align: center;
      z-index: 1;
      position: relative;
      margin-right: 0;

      &.active {
        margin-right: $secondary-sidebar-width;
      }
    }

    &.secondary {
      width: $secondary-sidebar-width;
      transform: translateX(-100%);
      position: absolute;
      top: 0;
      left: $primary-sidebar-width;

      button {
        width: 100%;
      }

      &.active {
        transform: translateX(0);
      }
    }
  }
}