//
// MIXINS
//

@mixin collapse-contextual-sidebar-content {

  @include context-header-collapsed;

  .context-header {
    height: auto;

    a {
      padding: $gl-spacing-scale-2;
    }
  }

  .sidebar-top-level-items > li {
    .sidebar-sub-level-items {
      &:not(.flyout-list) {
        display: none;
      }
    }
  }

  .nav-icon-container {
    margin-right: 0;
  }

  .toggle-sidebar-button {
    width: #{$contextual-sidebar-collapsed-width - 1px};
    padding: 0 21px;

    .collapse-text {
      display: none;
    }

    .icon-chevron-double-lg-left {
      transform: rotate(180deg);
      margin: 0;
    }
  }
}

@mixin collapse-contextual-sidebar {
  width: $contextual-sidebar-collapsed-width;

  .nav-sidebar-inner-scroll {
    overflow-x: hidden;
  }

  .badge.badge-pill:not(.fly-out-badge),
  .nav-item-name,
  .collapse-text {
    @include gl-sr-only;
  }

  .sidebar-top-level-items > li > a {
    min-height: unset;
  }

  .fly-out-top-item:not(.divider) {
    display: block !important;
  }

  .avatar-container {
    margin: 0 auto;
  }
}

@mixin sub-level-items-flyout {
  .sidebar-sub-level-items {
    @include media-breakpoint-up(sm) {
      position: fixed;
      top: 0;
      left: 0;
      margin-left: $gl-spacing-scale-3;
      margin-top: 0;
      padding-left: 0;
      padding-right: 0;
      padding-bottom: $gl-spacing-scale-2;
      padding-top: 0;
      background-color: $gray-10;
      box-shadow: 0 $gl-spacing-scale-2 $gl-spacing-scale-5 $t-gray-a-24, 0 0 $gl-spacing-scale-1 $t-gray-a-24;
      border-style: none;
      border-radius: $border-radius-default;

      .divider {
        display: none;
      }

      .divider + li > a {
        margin-top: $gl-spacing-scale-2;
      }

      li:last-of-type a {
        margin-bottom: 0;
      }

      &.is-above {
        margin-top: 0;
      }
    }

    a {
      padding-left: $gl-spacing-scale-4;
      padding-right: $gl-spacing-scale-4;
    }

    .fly-out-top-item {
      > a {
        display: flex;
      }

      .fly-out-badge {
        margin-left: 8px;
      }
    }

    .fly-out-top-item-name {
      flex: 1;
    }
  }
}

@mixin context-header {
  $avatar-box-shadow: inset 0 0 0 1px $t-gray-a-08;

  padding: $gl-spacing-scale-2;
  margin-bottom: $gl-spacing-scale-2;
  margin-top: $gl-spacing-scale-1;

  .avatar-container {
    font-weight: $gl-font-weight-normal;
    flex: none;
  }
}

@mixin top-level-item {
  height: $gl-spacing-scale-7;
  padding-left: $gl-spacing-scale-4;
  padding-right: $gl-spacing-scale-4;
  display: flex;
  align-items: center;
  border-radius: $gl-border-radius-base;
  width: auto;
  transition: none;
  margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin;

  &:hover {
    background-color: $nav-active-bg;
  }
}

@mixin fly-out-top-item($has-sub-items: false) {
  display: none;

  a,
  a:hover,
  &.active a,
  .fly-out-top-item-container {
    margin-left: 0;
    margin-right: 0;
    padding-left: $gl-spacing-scale-5;
    padding-right: $gl-spacing-scale-5;
    cursor: default;
    pointer-events: none;
    font-size: $gl-font-size-sm;

    @if $has-sub-items {
      margin-top: 0;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    } @else {
      margin-bottom: -#{$gl-spacing-scale-2};
      margin-top: 0;
      position: relative;
      color: $white;
      background: var(--black, $black);

      strong {
        font-weight: $gl-font-weight-normal;
      }

      &::before {
        position: absolute;
        content: '';
        display: block;
        top: 50%;
        left: -$gl-spacing-scale-2;
        margin-top: -$gl-spacing-scale-2;
        width: 0;
        height: 0;
        border-top: $gl-spacing-scale-2 solid transparent;
        border-bottom: $gl-spacing-scale-2 solid transparent;
        border-right: $gl-spacing-scale-2 solid $black;
        border-right-color: var(--black, $black);
      }
    }
  }
}

//
// THE PANEL
//

.nav-sidebar {
  position: fixed;
  bottom: $calc-application-footer-height;
  left: 0;
  transition: width $gl-transition-duration-medium, left $gl-transition-duration-medium;
  z-index: 600;
  width: $contextual-sidebar-width;
  top: $calc-application-header-height;
  background-color: $contextual-sidebar-bg-color;
  border-right: 1px solid $contextual-sidebar-border-color;
  transform: translate3d(0, 0, 0);

  &.sidebar-collapsed-desktop {
    @include collapse-contextual-sidebar;
  }

  &.sidebar-expanded-mobile {
    left: 0;
  }

  a {
    text-decoration: none;
    color: $gray-900;
  }

  li {
    white-space: nowrap;

    .nav-item-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    > a,
    > .fly-out-top-item-container {
      @include top-level-item;
    }

    &.active {
      > a {
        font-weight: $gl-font-weight-bold;
      }

      &:not(.fly-out-top-item) {
        > a:not(.has-sub-items) {
          background-color: $nav-active-bg;
        }
      }
    }
  }

  ul {
    padding-left: 0;
    list-style: none;
  }

  @include media-breakpoint-down(sm) {
    left: (-$contextual-sidebar-width);
  }

  .nav-icon-container {
    display: flex;
    margin-right: 8px;
  }

  a:not(.has-sub-items) + .sidebar-sub-level-items {
    .fly-out-top-item {
      @include fly-out-top-item($has-sub-items: false);
    }
  }

  a.has-sub-items + .sidebar-sub-level-items {
    @include media-breakpoint-up(sm) {
      min-width: 150px;
    }

    .fly-out-top-item {
      @include fly-out-top-item($has-sub-items: true);
    }
  }

  a.has-sub-items + .sidebar-sub-level-items.fly-out-list {
    margin-top: -$gl-spacing-scale-2;

    &.is-above {
      margin-top: $gl-spacing-scale-2;
    }
  }

  @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) {
    &:not(.sidebar-expanded-mobile) {
      @include collapse-contextual-sidebar;
      @include collapse-contextual-sidebar-content;
    }
  }
}

.nav-sidebar-inner-scroll {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;

  > div.context-header {
    margin-top: $gl-spacing-scale-2;

    a {
      @include top-level-item;
      @include context-header;
      height: auto;
    }
  }
}

.sidebar-top-level-items {
  margin-bottom: 60px;

  .context-header a {
    @include context-header;
    height: auto;
  }

  > li {
    &.active {
      .sidebar-sub-level-items:not(.is-fly-out-only) {
        display: block;
      }
    }
  }

  li > a.gl-link {
    // undo gl-link text items for things in the sidebar - including sub menus
    // defined in https://gitlab.com/gitlab-org/gitlab-ui/-/blob/5431e0ca5149d4e02e3d5d617d194ac9609bb82d/src/components/base/link/link.scss
    color: $body-color;

    &:active,
    &:focus,
    &:focus:active {
      text-decoration: none;
    }
  }
}

.sidebar-sub-level-items {
  padding-top: 0;
  padding-bottom: 0;
  display: none;

  &:not(.fly-out-list) {
    li > a {
      // The calculation formula:
      // 12px: normal padding on the menu anchors
      // +
      // 16px: the width of the SVG icon in the top-level links
      // +
      // 8px: margin-right on the SVG icon in the top-level links
      // =
      // 36px (4.5 times the $grid-size)
      padding-left: $grid-size * 4.5;
    }
  }
}

.is-showing-fly-out {
  @include sub-level-items-flyout;
}

//
// COLLAPSED STATE
//

.toggle-sidebar-button,
.close-nav-button {
  @include side-panel-toggle;
  background-color: $contextual-sidebar-bg-color;
  position: fixed;
  bottom: 0;
  width: #{$contextual-sidebar-width - 1px};

  .collapse-text,
  .icon-chevron-double-lg-left,
  .icon-chevron-double-lg-right {
    color: inherit;
  }
}

.collapse-text {
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-collapsed-desktop {
  @include collapse-contextual-sidebar-content;
}

//
// MOBILE PANEL
//

.close-nav-button {
  display: none;
}

@include media-breakpoint-down(sm) {
  .close-nav-button {
    display: flex;
  }

  .toggle-sidebar-button {
    display: none;
  }

  .mobile-overlay {
    display: none;

    &.mobile-nav-open {
      display: block;
      position: fixed;
      background-color: $t-gray-a-24;
      height: 100%;
      width: 100%;
      z-index: $zindex-dropdown-menu;
    }
  }
}

//
// PANELS-SPECIFIC
//

.icon-avatar,
.settings-avatar {
  svg {
    margin: auto;
  }
}