#6372: Fix nav menu scrolling and styling

netbox/project-static/src/bs.ts

@@ -117,13 +117,41 @@ function initTabs() {
   }
 }
 
+/**
+ * When accordion buttons are clicked, add a class to the parent accordion item. This is used
+ * for the side navigation to apply a box-shadow when the section is open.
+ */
+function initSidebarAccordions(): void {
+  const items = document.querySelectorAll<HTMLDivElement>('.sidebar .accordion-item');
+
+  function handleToggle(thisItem: HTMLDivElement) {
+    for (const item of items) {
+      if (item !== thisItem) {
+        // Remove the is-open class from all other accordion items, so that if one is clicked while
+        // another is open, the shadow is removed.
+        item.classList.remove('is-open');
+      } else {
+        item.classList.toggle('is-open');
+      }
+    }
+  }
+
+  for (const item of items) {
+    for (const button of item.querySelectorAll<HTMLButtonElement>('.accordion-button')) {
+      button.addEventListener('click', () => {
+        handleToggle(item);
+      });
+    }
+  }
+}
+
 /**
  * Enable any defined Bootstrap Tooltips.
  *
  * @see https://getbootstrap.com/docs/5.0/components/tooltips
  */
 export function initBootstrap(): void {
-  for (const func of [initTooltips, initModals, initMasonry, initTabs]) {
+  for (const func of [initTooltips, initModals, initMasonry, initTabs, initSidebarAccordions]) {
     func();
   }
 }

netbox/project-static/styles/netbox.scss

@@ -511,6 +511,12 @@ div.content-container {
 
   div.accordion-item {
     border: unset;
+    padding: 0 $spacer / 2;
+
+    // When an sidenav section is open, apply a shadow to provide a visual border.
+    &.is-open {
+      box-shadow: inset 0px -25px 20px -25px rgba($black, 0.25);
+    }
 
     & > a.accordion-button {
       &:not(.collapsed) {
@@ -553,13 +559,13 @@ div.content-container {
     }
   }
   div.position-sticky {
-    height: calc(100vh - 8rem);
+    height: calc(100vh - #{$sidebar-bottom-height});
   }
   div.sidebar-bottom {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
     position: sticky;
-    height: 8rem;
+    height: $sidebar-bottom-height;
     background-color: var(--nbx-sidebar-bg);
 
     @include media-breakpoint-down(md) {

netbox/project-static/styles/theme-base.scss

@@ -245,3 +245,4 @@ $accordion-padding-y: 0.8125rem;
 $accordion-padding-x: 0.8125rem;
 
 $sidebar-width: 280px;
+$sidebar-bottom-height: 4rem;

netbox/templates/base/layout.html

@@ -21,7 +21,7 @@
             </a>
           </div>
 
-          <ul class="nav flex-column px-1">
+          <ul class="nav flex-column">
 
             {# Search bar for collapsed menu #}
             <div class="d-block d-md-none mx-1 my-3 search-container">