Fix designation of active menu item

netbox/project-static/src/sidenav.ts

@@ -204,7 +204,7 @@ class SideNav {
    * @param link Active nav link
    * @param action Expand or Collapse
    */
-  private activateLink(link: HTMLAnchorElement, action: 'expand' | 'collapse'): void {
+  private activateLink(link: HTMLDivElement, action: 'expand' | 'collapse'): void {
     // Find the closest .collapse element, which should contain `link`.
     const collapse = link.closest('.collapse') as Nullable<HTMLDivElement>;
     if (isElement(collapse)) {
@@ -232,13 +232,16 @@ class SideNav {
    * Find any nav links with `href` attributes matching the current path, to determine which nav
    * link should be considered active.
    */
-  private *getActiveLinks(): Generator<HTMLAnchorElement> {
+  private *getActiveLinks(): Generator<HTMLDivElement> {
-    for (const link of this.base.querySelectorAll<HTMLAnchorElement>(
+    for (const menuitem of this.base.querySelectorAll<HTMLDivElement>(
-      '.navbar-nav .nav .nav-item a.nav-link',
+      'ul.navbar-nav .nav-item .dropdown-item',
     )) {
+      const link = menuitem.querySelector<HTMLAnchorElement>('a')
+      if (link) {
         const href = new RegExp(link.href, 'gi');
         if (window.location.href.match(href)) {
-        yield link;
+          yield menuitem;
+        }
       }
     }
   }
@@ -309,7 +312,7 @@ class SideNav {
 }
 
 export function initSideNav(): void {
-  for (const sidenav of getElements<HTMLDivElement>('.sidenav')) {
+  for (const sidenav of getElements<HTMLDivElement>('.navbar')) {
     new SideNav(sidenav);
   }
 }

netbox/project-static/styles/netbox.scss

@@ -10,6 +10,7 @@
 // Transitional styling to ease migration of templates from NetBox v3.x
 @import 'transitional/cards';
 @import 'transitional/layout';
+@import 'transitional/navigation';
 @import 'transitional/tables';
 @import 'transitional/tabs';
 

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

@@ -0,0 +1,23 @@
+// Navbar styling
+.navbar-vertical.navbar-expand-lg {
+  .navbar-collapse {
+    .dropdown-menu {
+      .dropdown-item {
+
+        // Remove underline from nav menu items
+        a:hover {
+          text-decoration: none;
+        }
+
+        // Style active menu item
+        &.active {
+          background-color: $gray-700;
+          a {
+            color: white;
+          }
+        }
+
+      }
+    }
+  }
+}