From 77dbf5c3f177aa0b03631468487cd4f98de347a0 Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <jstretch@netboxlabs.com>
Date: Wed, 10 Jan 2024 17:17:46 -0500
Subject: [PATCH] Fix designation of active menu item

---
 netbox/project-static/dist/netbox.css         | Bin 543617 -> 543941 bytes
 netbox/project-static/dist/netbox.js          | Bin 456654 -> 456691 bytes
 netbox/project-static/dist/netbox.js.map      | Bin 370710 -> 370752 bytes
 netbox/project-static/src/sidenav.ts          |  19 +++++++++------
 netbox/project-static/styles/netbox.scss      |   1 +
 .../styles/transitional/_navigation.scss      |  23 ++++++++++++++++++
 6 files changed, 35 insertions(+), 8 deletions(-)
 create mode 100644 netbox/project-static/styles/transitional/_navigation.scss

diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css
index 11ceaee99927906c38aae41d5710aee9c53cb73b..1ba0252274e709f9c974328404a1b69bbd4cbbe0 100644
GIT binary patch
delta 97
zcmZpiu6T5&VnYjK3sVbo3rh=Y3tJ2O7LI<8>0<7z^3(mkuoyBaBu<x2VU(S|)|!!h
y`YtP0o#_W`S(T@kX|fBkD;p=8SeRN)-)O~Z3K7nk&C1E5oR*fhz0ZT=GZO&f*&a{;

delta 31
ncmX>)Q?YTnVnYjK3sVbo3rh=Y3tJ2O7LI<8?Uy|{J~06Rw{Htm

diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js
index acb084e6a0f7ee38490cfc3ae755fdbaafa84afd..c56916132626e4e8eda2a925fa26eb1beb14229d 100644
GIT binary patch
delta 160
zcmX^2Ui$NU>4p}@7N!>F7M2#)Eo@7kCYI*t<t3ISB^K!dDFqN)H?t%)S3xhOD8C>j
zzdR4jRnpX~&Pgp%NX@h@$<!+>O)aVnPR&V8F3B&_P)bzNw9ZV^NX>+(Day3XOD$Ij
yN=<jID9}iq{@^K_hCorKrka{YWoBwlib6@IX6<(IXKV|Y*dSJK-}iz|fFA$_xH|#>

delta 123
zcmezTUi#d7>4p}@7N!>F7M2#)Eo@7k+UVsamL(+?=>jPQ5F1SBW|pMpDkOsVx;dG7
z*-Dz4)j6pp3aOd4d8y?JL8<Ak6$Kh4(^;RfY4E3JYO1MeRA#2;q$reRYHqiE#<qZo
Ry*M)^6{vmt;}>iK`~VZzER+BM

diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map
index 040483b0f76c5900bc02fe1e775d26718b1d3b2e..ac3a0d68f0462ff1716f060b6f58775e8daa2fd0 100644
GIT binary patch
delta 159
zcmbPsLF~W<v4$4L7N!>F7M3lnH)rw{JL$MPIu<(XI6GSU=4^jHlU0>b)da+K&U4Z6
zcXSNb@pW{J1QFgk-XJ2=$<bNgNylKi;cQlMnP8n{N5@QOpp<i&3&<!>5aA2bA2i)+
tHmfI#zhki9bjCTXX5079X1&fR9Pa3x0afYg=oqNu>1@1x`CQg~E&yihFXjLM

delta 125
zcmX?bL2TLuv4$4L7N!>F7M3lnH)rxyI_bDOIu<(XI6GSU7Hxk%lU0>bRU5>0E^*QE
zcXSNb@pW_z1QFgk-XJ2=$<f)^NvCqU;cQm%=|!_ytyz2>1HHCyoXyJ1Bpm7JoZ$j8
T(o@G1q|ej2V*ACptod93>k}s3

diff --git a/netbox/project-static/src/sidenav.ts b/netbox/project-static/src/sidenav.ts
index d8207c9f7..97a86e4d2 100644
--- a/netbox/project-static/src/sidenav.ts
+++ b/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> {
-    for (const link of this.base.querySelectorAll<HTMLAnchorElement>(
-      '.navbar-nav .nav .nav-item a.nav-link',
+  private *getActiveLinks(): Generator<HTMLDivElement> {
+    for (const menuitem of this.base.querySelectorAll<HTMLDivElement>(
+      'ul.navbar-nav .nav-item .dropdown-item',
     )) {
-      const href = new RegExp(link.href, 'gi');
-      if (window.location.href.match(href)) {
-        yield link;
+      const link = menuitem.querySelector<HTMLAnchorElement>('a')
+      if (link) {
+        const href = new RegExp(link.href, 'gi');
+        if (window.location.href.match(href)) {
+          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);
   }
 }
diff --git a/netbox/project-static/styles/netbox.scss b/netbox/project-static/styles/netbox.scss
index 5158ab6a0..e297d80ef 100644
--- a/netbox/project-static/styles/netbox.scss
+++ b/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';
 
diff --git a/netbox/project-static/styles/transitional/_navigation.scss b/netbox/project-static/styles/transitional/_navigation.scss
new file mode 100644
index 000000000..e676d7c98
--- /dev/null
+++ b/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;
+          }
+        }
+
+      }
+    }
+  }
+}