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

// Navbar and light theme styling
.navbar-vertical.navbar-expand-lg {

  // Adds spacing to the bottom of the side navigation to avoid hidden nav items
  @include media-breakpoint-up(lg) {
    padding-bottom: 2rem;
  }

  // Adjust hover color & style for menu items
  .navbar-collapse {
    .nav-link-icon {
      color: var(--tblr-nav-link-color) !important;
    }
    .text-secondary {
      color: $dark-teal !important;
    }

    .dropdown-menu {

      // Adjust hover color & style for menu items
      .dropdown-item {
        a {
          color: $rich-black;
        }
        .btn-group {
          visibility: hidden;
        }

        // Style menu item hover state
        &:hover {
          background-color: var(--tblr-navbar-active-bg);
          a {
            text-decoration: none;
          }
          .btn-group {
            visibility: visible;
          }
        }

        // Style active menu item
        &.active {
          background-color: var(--tblr-navbar-active-bg);
          a {
            color: $rich-black;
          }
          .btn-group {
            visibility: visible;
          }
        }

      }
    }
  }

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

  // 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.00) 0%, rgba(0, 0, 0, 0.30) 100%);
    opacity: .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
body[data-bs-theme=light] .navbar-vertical.navbar-expand-lg {
  // Background Gradient
  background: linear-gradient(180deg, rgba(0, 133, 125, 0.00) 0%, rgba(0, 133, 125, 0.10) 100%), #FFF;
}

// Dark theme styling
body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg {

  // Background Gradient
  background: linear-gradient(180deg, rgba(0, 242, 212, 0.00) 0%, rgba(0, 242, 212, 0.10) 100%), #001423;

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

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

  img.motif {
    opacity: .25;
  }
}