netbox-community-netbox/netbox/project-static/styles/sidenav.scss

@use 'sass:map';
@use 'sass:math';

@mixin parent-link {
  .navbar-nav .nav-item .nav-link[data-bs-toggle] {
    @content;
  }
}

@mixin child-link {
  .collapse .nav .nav-item .nav-link {
    @content;
  }
}

@mixin sidenav-open {
  body[data-sidenav-show],
  body[data-sidenav-pinned] {
    .sidenav {
      @content;
    }
  }
}

@mixin sidenav-closed {
  body[data-sidenav-hide],
  body[data-sidenav-hidden] {
    .sidenav {
      @content;
    }
  }
}

@mixin sidenav-pinned {
  body[data-sidenav-pinned] {
    .sidenav {
      @content;
    }
  }
}

@mixin sidenav-show {
  body[data-sidenav-show] {
    .sidenav {
      @content;
    }
  }
}

@mixin sidenav-hide {
  body[data-sidenav-hide] {
    .sidenav {
      @content;
    }
  }
}

@mixin sidenav-peek {
  .g-sidenav-show:not(.g-sidenav-pinned) {
    .sidenav {
      @content;
    }
  }
}

.sidenav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: block;
  width: 100%;
  max-width: $sidenav-width-closed;
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
  background-color: var(--nbx-sidebar-bg);
  border-right: 1px solid $border-color;
  transition: $transition-100ms-ease-in-out;

  // Media fixes for mobile resolutions.
  @include media-breakpoint-down(lg) {
    transform: translateX(-$sidenav-width-closed);

    + .content-container[class] {
      margin-left: 0;
    }

    .profile-button-container[class] {
      display: block;
    }
  }

  .profile-button-container {
    display: none;
    padding: $sidenav-link-spacing-y $sidenav-link-spacing-x;
  }

  + .content-container {
    margin-left: $sidenav-width-closed;
    transition: $transition-100ms-ease-in-out;
  }

  // Navbar brand
  .sidenav-brand {
    margin-right: 0;
    transition: opacity 0.1s ease-in-out;
  }

  .sidenav-brand-icon {
    transition: opacity 0.1s ease-in-out;
  }

  .sidenav-inner {
    padding-right: $sidenav-spacing-x;
    padding-left: $sidenav-spacing-x;
    @include media-breakpoint-up(md) {
      padding-right: 0;
      padding-left: 0;
    }
  }

  .sidenav-brand-img,
  .sidenav-brand > img {
    max-width: 100%;
    max-height: calc(#{$sidenav-width-open} - 1rem);
  }

  .navbar-heading {
    padding-top: $nav-link-padding-y;
    padding-bottom: $nav-link-padding-y;
    font-size: $font-size-xs;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .sidenav-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 78px;
    padding: $spacer;
    transition: $transition-100ms-ease-in-out;
  }

  .sidenav-toggle {
    // The sidenav toggle's default state is "hidden". Because modifying the `display` property
    // isn't ideal for smooth transitions, combine opacity 0 (transparent) and position absolute
    // to yield a similar result.
    position: absolute;
    display: inline-block;
    opacity: 0;
    // The transition itself is largely irrelevant, but CSS needs *something* to transition in
    // order to apply a delay.
    transition: opacity 10ms ease-in-out;
    // Offset the transition delay so the icon isn't visible during the logo transition.
    transition-delay: 0.1s;
  }

  .sidenav-collapse {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    padding-right: $sidenav-spacing-x;
    padding-left: $sidenav-spacing-x;
    margin-right: -$sidenav-spacing-x;
    margin-left: -$sidenav-spacing-x;

    > * {
      min-width: 100%;
    }

    @include media-breakpoint-up(md) {
      margin-right: 0;
      margin-left: 0;
    }
  }

  .nav-group-header {
    padding: math.div($sidenav-link-spacing-y, 2) $sidenav-link-spacing-x;
    margin-top: 0.5rem;
    margin-bottom: 0;
  }

  // Child Link nav-item
  .nav .nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    &.no-buttons {
      // When there are no buttons, don't extend to the full width of the sidenav.
      padding-right: $spacer * 5;
    }
  }

  @include child-link() {
    width: 100%;
    padding-top: math.div($sidenav-link-spacing-y, 2);
    padding-right: map.get($spacers, 1);
    padding-bottom: math.div($sidenav-link-spacing-y, 2);
    padding-left: $sidenav-link-spacing-x;
    margin-top: 0;
    margin-bottom: 0;
    border-top-right-radius: $border-radius;
    border-bottom-right-radius: $border-radius;

    .sidenav-mini-icon {
      width: $sidenav-link-spacing-x;
      text-align: center;
      transition: $transition-100ms-ease-in-out;
    }
  }

  @include parent-link() {
    width: unset;
    height: 100%;
    padding-left: math.div($sidenav-link-spacing-x, 2);
    font-weight: $font-weight-bold;
    color: var(--nbx-sidenav-parent-color);

    &:after {
      display: inline-block;
      margin-left: auto;
      /* stylelint-disable */
      font-family: 'Material Design Icons';
      /* stylelint-enable */
      font-style: normal;
      font-weight: 700;
      font-variant: normal;
      color: $text-muted;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      content: '\f0142';
      transition: $transition-100ms-ease-in-out;
    }

    // Expanded
    &[aria-expanded='true'] {
      &.active:after {
        color: $accordion-button-active-color;
      }
      &:after {
        color: $primary;
        transform: rotate(90deg);
      }
    }

    .nav-link-text {
      padding-left: 0.25rem;
      transition: $transition-100ms-ease-in-out;
    }
  }

  .navbar-nav {
    flex-direction: column;
    margin-right: -$sidenav-spacing-x;
    margin-left: -$sidenav-spacing-x;

    .nav-item {
      margin-top: 2px;

      &.disabled {
        cursor: not-allowed;
        opacity: 0.8;
      }

      // All Links
      .nav-link {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        padding: $sidenav-link-spacing-y $sidenav-link-spacing-x;
        font-size: $font-size-sm;
        color: var(--nbx-sidenav-link-color);
        white-space: nowrap;
        transition-duration: 0ms;

        &.active {
          background-color: var(--nbx-sidebar-link-active-bg);
        }

        &:hover:not(.active) {
          color: var(--nbx-body-color);
          background-color: var(--nbx-sidebar-link-hover-bg);
        }

        // Icon
        > i {
          min-width: $sidenav-icon-width;
          font-size: calc(45px / 2);
          text-align: center;
        }
      }
    }

    .nav-group-label {
      display: block;
      font-size: $font-size-xs;
      font-weight: $font-weight-bold;
      // color: $secondary;
      color: var(--nbx-sidenav-group-color);
      text-transform: uppercase;
      white-space: nowrap;
    }
  }
}

@include sidenav-pinned() {
  .sidenav-toggle-icon {
    color: var(--nbx-sidenav-pin-color);
    transform: rotate(90deg);
  }
  @include media-breakpoint-up(xl) {
    + .content-container {
      margin-left: $sidenav-width-open;
    }
  }
}

@include sidenav-peek() {
  .sidenav-toggle-icon {
    transform: rotate(0deg);
  }
}

@include sidenav-open() {
  max-width: $sidenav-width-open;

  .sidenav-brand,
  .navbar-heading {
    display: block;
  }

  .sidenav-brand {
    opacity: 1;
    transform: translateX(0);
  }

  .sidenav-brand-icon {
    position: absolute;
    opacity: 0;
  }

  @include media-breakpoint-down(lg) {
    transform: translateX(0);
  }
}

@include sidenav-closed() {
  .sidenav-header {
    padding: $spacer * 0.5;
  }

  .sidenav-brand {
    position: absolute;
    opacity: 0;
  }

  .sidenav-brand-icon {
    opacity: 1;
  }

  .sidenav-toggle {
    // Immediately hide the toggle when the sidenav is closed, so it doesn't linger and overlap
    // with the logo elements.
    opacity: 0;
    position: absolute;
    transition: unset;
    transition-delay: 0ms;
  }

  .navbar-nav > .nav-item {
    > .nav-link {
      &:after {
        content: '';
      }
    }
  }

  .nav-item .collapse {
    display: none;
  }

  .nav-link-text {
    opacity: 0;
  }

  @include parent-link() {
    &.active {
      margin-right: 0;
      margin-left: 0;
      border-radius: unset;
    }
  }
}

@include sidenav-show() {
  .sidenav-brand {
    display: block;
  }

  .nav-item .collapse {
    height: auto;
    transition: $transition-100ms-ease-in-out;
  }

  .nav-item .nav-link .nav-link-text {
    opacity: 1;
  }

  .nav-item .sidenav-mini-icon {
    opacity: 0;
  }

  @include media-breakpoint-up(lg) {
    .sidenav-toggle {
      position: relative;
      opacity: 1;
    }
  }
}

.simplebar-track.simplebar-vertical {
  right: 0;
  width: 6px;
  background-color: transparent;

  .simplebar-scrollbar {
    transition: none;

    &:before {
      right: 0;
      width: 3px;
      background: var(--nbx-sidebar-scroll);
      border-radius: $border-radius;
    }
  }

  &.simplebar-hover .simplebar-scrollbar:before {
    width: 5px;
  }
}