.sidebar {
  position: fixed;
  top: $page-top;
  bottom: 0;
  width: $page-margin-left;
  z-index: 1030;
}
.nav-sidebar {
  background-color: $sidenav-bg;
  overflow-x: hidden;
  overflow-y: scroll;
  table-layout: fixed;
  position: relative;
  display: block;
  height: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 20px;

  &::-webkit-scrollbar {
    display: none;
  }

  > .nav {
    @include flex-direction(column);
    padding-bottom: 35px;
    @-moz-document url-prefix() {
      margin-right: -15px;
    }
  }

  .nav {
    .nav-item {
      width: 100%;
    }

    > li > a {
      display: block;
      color: rgba($white, .8);
      line-height: $sidenav-line-height;
      padding: $sidenav-padding-x $sidenav-padding-y;
      font-weight: $sidenav-font-weight;
      font-size: $sidenav-font-size;
    }

    > li > a:focus,
    > li > a:hover {
      color: $white;
    }

    li.active > a,
    .nav li.active > a,
    .nav li > a.active {
      background-color: transparent;
      color: $white;
      font-weight: $sidenav-font-size-bold;
    }

    .nav {
      background-color: lighten($sidenav-bg, 1%);

      &.show {
        display: block;
      }

      a {
        padding-left: 48px;
        line-height: $sidenav-line-height-sm;
        text-transform: none;
        font-weight: $font-weight-normal;
        font-size: $sidenav-submenu-font-size;
        color: rgba($white, .75);
      }

      li > a:hover,
      li > a:focus {
        background-color: transparent;
      }
    }

    .arrow {
      line-height: $sidenav-line-height;
    }

    .fa-fw {
      width: 1.8em;
      text-align: left;
      font-size: 17px;
    }
  }

  .has-arrow {
    position: relative;

    &::after {
      position: absolute;
      content: '';
      width: .5em;
      height: .5em;
      border-width: 1px 0 0 1px;
      border-style: solid;
      border-color: initial;
      right: 0.5em;
      -webkit-transform: rotate(-45deg) translate(0, -50%);
      transform: rotate(-45deg) translate(0, -50%);
      -webkit-transform-origin: top;
      transform-origin: top;
      top: 50%;
      transition: all .3s ease-out;
    }
  }

  .active > .has-arrow::after,
  .has-arrow[aria-expanded="true"]::after {
    -webkit-transform: rotate(-135deg) translate(0, -50%);
    transform: rotate(-135deg) translate(0, -50%);
  }
}
@include media-breakpoint-down(sm) {
  .navbar-brand {
    display: none;
  }
  .sidebar {
    width: 100%;

    &:not(.show) {
      height: 0;
    }
  }
  .nav-sidebar {
    display: none;
    position: relative;

    &.show {
      display: block;
    }
  }
}
