netbox/netbox/project-static/styles/transitional/_navigation.scss

// Navbar and light theme styling
.navbar-vertical.navbar-expand-lg {
  // Scroll the whole sidebar as Tabler 1.4 did. sidenav.ts saves and restores its offset.
  @include media-breakpoint-up(lg) {
    overflow-y: auto;

    > [class^='container'] {
      height: auto;
      min-height: 100%;
    }
    .navbar-collapse {
      min-height: auto;
      overflow-y: visible;
    }
    .navbar-brand {
      justify-content: center;
    }

    // Tabler 1.6 drops the bar that marks the active menu group
    .navbar-collapse .nav-item.active:after {
      content: '';
      border-bottom-width: 0;
      border-left-width: 3px;
      inset-inline-end: auto;
      top: 0;
      bottom: 0;
    }
  }

  // Gap for the reveal in sidenav.ts, which scrolls with `block: 'nearest'`
  .nav-item.dropdown,
  .dropdown-item {
    scroll-margin-block: 0.5rem;
  }

  // Render the <button> menu headings identically to the surrounding nav links
  .navbar-collapse .nav-item.dropdown > button.nav-link {
    width: 100%;
    background-color: transparent;
    border: 0;
    text-align: left;
  }

  // Adjust hover color & style for menu items
  .navbar-collapse {
    .nav-link-icon,
    .nav-link-title {
      color: $rich-black;
    }
    .text-secondary {
      color: $dark-teal !important;
    }

    .dropdown-menu {
      // Adjust hover color & style for menu items
      .dropdown-item {
        border-radius: 0;

        > a {
          color: $rich-black;
        }
        .dropdown-item-buttons {
          visibility: hidden;
        }

        // Style menu item hover/active state
        &:hover,
        &.active,
        &:focus-within {
          background-color: var(--tblr-navbar-active-bg);
          > a {
            text-decoration: none;
          }
          .dropdown-item-buttons {
            visibility: visible;
          }
        }

        // Tabler 1.6 sets the current item in medium weight
        &.active,
        &:active {
          font-weight: inherit;
        }
      }
    }
  }

  // Ensures theme toggle appears above background image
  .navbar-nav {
    z-index: 1;
  }

  // Tabler 1.6 sets the active menu group in medium weight
  .navbar-nav .nav-item.active > .nav-link {
    font-weight: inherit;
  }

  // Logo text for non-community editions
  .navbar-brand {
    // Reduce logo padding on mobile view
    @include media-breakpoint-down(lg) {
      padding: 0.2rem 0;
    }

    a:hover {
      text-decoration: none;
    }
  }

  // Navigation geometric graphic for non-community editions
  img.motif {
    bottom: 0;
    display: none;
    left: 0;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
    opacity: 0.5;
    position: fixed;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    width: 18rem;

    @include media-breakpoint-up(lg) {
      display: block;
    }
  }
}

// Light theme styling
html[data-bs-theme='light'] .navbar-vertical.navbar-expand-lg {
  // Background Gradient
  background: linear-gradient(180deg, rgba(0, 133, 125, 0) 0%, rgba(0, 133, 125, 0.1) 100%), #fff;
}

// Dark theme styling
html[data-bs-theme='dark'] .navbar-vertical.navbar-expand-lg {
  // Background Gradient
  background:
    linear-gradient(180deg, rgba(0, 242, 212, 0) 0%, rgba(0, 242, 212, 0.1) 100%), #001423;

  // Border color for active dropdown list
  .nav-item.dropdown.active:after {
    border-color: $bright-teal !important;
  }

  .nav-link-title,
  .nav-link-icon {
    color: white !important;
  }

  // Adjust hover color & style for menu items
  .dropdown-item {
    > a {
      color: white !important;
    }
    &.active,
    &:hover {
      background-color: $navbar-dark-active-bg !important;
    }
  }
  .text-secondary {
    color: $bright-teal !important;
  }

  img.motif {
    opacity: 0.25;
  }
}