@import '~app/styles/init';

$sidebar-scroll-width: 4px;
$sidebar-user-height: 11rem;

.al-sidebar {
  width: $sidebar-width;
  top: $header-height;
  left: 0;
  z-index: $z-index-sidebar;
  position: fixed;
  display: flex;
  flex-direction: column;
  background-color: $sidebar;
  height: calc(100vh - #{$header-height});
  @include scrollbars($sidebar-scroll-width, $sidebar-border, rgba($sidebar-border, .1));
}

.al-sidebar-menu {
  height: calc(100% - #{$sidebar-user-height});
  overflow-y: auto;
}

.al-sidebar-list {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.al-sidebar-sublist .subitem-submenu-list {
  padding-left: 15px;
}

.subitem-submenu-link {
  .fa {
    top: 7px;
  }
}

.al-sidebar-list-item {
  display: block;
  position: relative;
  float: none;

  &.user {
    height: $sidebar-user-height;
  }

  padding: 0;

  &.selected:not(.with-sub-menu) {
    background-color: $primary;
    
    a.al-sidebar-list-link {
      color: $sidebar-text;

      .arrow-icon {
        color: $sidebar-text;
      }
    }
  }
}

.sa-sidebar-item-expanded {
  > ul.al-sidebar-sublist {
    display: block!important;
  }
}

.al-sidebar-list-item,
.sa-sidebar-sublist-item {
  &.sa-sidebar-item-expanded {
    > .al-sidebar-sublist {
      display: block;
    }
  }
}

a.al-sidebar-list-link {
  display: block;
  height: 42px;
  padding-left: 18px;
  text-shadow: none;
  font-size: 13px;
  text-decoration: none;
  color: $sidebar-text;
  line-height: 42px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;

  &:hover {
    color: $primary;

    .arrow-icon {
      color: $primary;
    }
  }

  .icon {
    margin-right: 18px;
    width: 16px;
    display: inline-block;
  }

  .arrow-icon {
    $size: 14px;
    position: absolute;
    display: block;
    font-size: 18px;
    right: 10px;
    top: $size;
    padding: 0;
    width: $size;
    height: $size;
    line-height: $size;
    text-shadow: none;
    text-align: center;
    color: $sidebar-text;
    opacity: .5;
  }
}

a.al-sidebar-user {
  display: block;
  padding: 15px;
  height: $sidebar-user-height;
  border-bottom: 3px solid $sidebar-border;
  overflow: hidden;

  > .al-sidebar-user-gravatar {
    display: block;
    width: 85px;
    height: 85px;
    border-radius: 100%;
    margin: 0 auto;
    border: 3px solid $sidebar-border;
    transform: rotate(0deg);
    transition: all 1s;
  }

  > .al-sidebar-user-profile {
    display: block;
    width: 100%;
    margin-top: 1em;

    > .al-sidebar-user-name {
      margin-bottom: 10px;
      text-align: center;
      color: $default;
    }

    > .al-sidebar-user-slogan {
      text-align: center;
      @include text-truncate();
      display: block;
    }
  }

  &:hover {
    .al-sidebar-user-gravatar {
      transform: rotate(360deg);
      transition: all 1s;
    }
  }
}

.slimScrollBar, .slimScrollRail {
  border-radius: 0px !important;
  width: $sidebar-scroll-width !important;
  left: $sidebar-width - $sidebar-scroll-width;
}

@mixin layout-collapsed() {
  .al-main {
    margin-left: 50px;
  }

  .al-footer {
    padding-left: 83px
  }
}

@mixin default-sublist() {
  padding: 0;
  list-style: none;
  position: relative;
  display: none;
  background-color: $sidebar-border;
  &.expanded {
    display: block;
  }

  > sa-menu-item > li {
    display: block;
    float: none;
    padding: 0;
    border-bottom: none;
    position: relative;

    a {
      display: block;
      text-shadow: none;
      font-size: 13px;
      text-decoration: none;
      color: $sidebar-text;
      padding-left: 35px;
      height: auto;
      line-height: 40px;

      &:hover {
        color: $primary;
      }
    }

    &.selected:not(.with-sub-menu) > a {
      border: none;
      background-color: $primary;

      &:hover {
        color: $sidebar-text;
      }
    }
  }
}

.al-sidebar-sublist {
  @include default-sublist();
}

.sidebar-hover-elem {
  width: $sidebar-scroll-width;
  background: $primary;
  position: absolute;
  top: -150px;
  left: $sidebar-width - $sidebar-scroll-width;
  transition: all 0.5s ease;
  transition-property: top, height;
  height: 42px;
  display: block;
}

.sidebar-select-elem {
  display: block;
  top: 94px;
}

@mixin sidebar-collapsed() {
  .al-sidebar {
    width: 52px;

    .fa-angle-down, .fa-angle-up {
      opacity: 0;
    }

    .al-sidebar-sublist {
      position: absolute;
      top: -1px;
      left: 52px;
      @include bg-translucent-dark(0.8);
      width: 0;
      display: block;
      overflow: hidden;
      transition: width 0.5s ease;
      &.slide-right {
        width: 135px;
      }
      &:before {
        display: none;
      }
      li {
        &:before {
          display: none;
        }
        a {
          padding-left: 18px;
          padding-right: 18px;
          min-width: 130px;
          white-space: nowrap;
        }
      }
    }

    .sidebar-hover-elem, .sidebar-select-elem {
      left: 48px;
    }
  }
}

@mixin sidebar-hidden() {
  .al-sidebar {
    width: 0;
  }
  .sidebar-hover-elem, .sidebar-select-elem {
    display: none;
  }
}

@mixin sidebar-overlap() {
  .al-sidebar {
    width: $sidebar-width;
    transition: width 0.5s ease;

    .fa-angle-down, .fa-angle-up {
      opacity: 1;
    }

    .al-sidebar-sublist {
      @include default-sublist();
      top: auto;
      left: auto;
      background: none;
      width: auto;
      overflow: visible;
      transition: none;
    }

    .sidebar-hover-elem, .sidebar-select-elem {
      left: $sidebar-width - 4;
      transition: left 0.5s ease;
    }
  }
}

.menu-collapsed {
  .slimScrollBar, .slimScrollRail {
    display: none!important;
  }

  .al-sidebar-list-link {

    .icon {
      font-size: 1.5em;
    }

    .arrow-icon {
      display: none!important;
    }
  }
}

@media (min-width: 1200px) {
  .menu-collapsed {
    @include layout-collapsed();
  }
}

@media (min-width: $resXS + 1) {
  .menu-collapsed {
    @include sidebar-collapsed();
  }
}

@media (max-width: 1200px) and (min-width: $resXS) {
  @include layout-collapsed();
}

@media (max-width: 1200px) {
  .al-sidebar {
    z-index: $z-index-sidebar-xs;
  }
  @include sidebar-overlap();
}

@media (max-width: $resXS) {
  .menu-collapsed {
    @include sidebar-hidden();
  }
  .al-main {
    margin-left: 0;
  }
  .al-footer {
    padding-left: 0;
  }
}
