#6372: Fix nav menu scrolling and styling

netbox/project-static/dist/netbox.js

@@ -1143,7 +1143,7 @@ var t;!function(e,i){"use strict";"function"==typeof t&&t.amd?t(["ev-emitter/ev-
 var define;
 var t;!function(i,o){"function"==typeof t&&t.amd?t(["outlayer/outlayer","get-size/get-size"],o):"object"==typeof module&&module.exports?module.exports=o(require("outlayer"),require("get-size")):i.Masonry=o(i.Outlayer,i.getSize)}(window,function(t,i){"use strict";var o=t.create("masonry");o.compatOptions.fitWidth="isFitWidth";var e=o.prototype;return e._resetLayout=function(){this.getSize(),this._getMeasurement("columnWidth","outerWidth"),this._getMeasurement("gutter","outerWidth"),this.measureColumns(),this.colYs=[];for(var t=0;t<this.cols;t++)this.colYs.push(0);this.maxY=0,this.horizontalColIndex=0},e.measureColumns=function(){if(this.getContainerWidth(),!this.columnWidth){var t=this.items[0],o=t&&t.element;this.columnWidth=o&&i(o).outerWidth||this.containerWidth}var e=this.columnWidth+=this.gutter,h=this.containerWidth+this.gutter,n=h/e,s=e-h%e;n=Math[s&&s<1?"round":"floor"](n),this.cols=Math.max(n,1)},e.getContainerWidth=function(){var t=this._getOption("fitWidth")?this.element.parentNode:this.element,o=i(t);this.containerWidth=o&&o.innerWidth},e._getItemLayoutPosition=function(t){t.getSize();var i=t.size.outerWidth%this.columnWidth,o=Math[i&&i<1?"round":"ceil"](t.size.outerWidth/this.columnWidth);o=Math.min(o,this.cols);for(var e=this[this.options.horizontalOrder?"_getHorizontalColPosition":"_getTopColPosition"](o,t),h={x:this.columnWidth*e.col,y:e.y},n=e.y+t.size.outerHeight,s=o+e.col,r=e.col;r<s;r++)this.colYs[r]=n;return h},e._getTopColPosition=function(t){var i=this._getTopColGroup(t),o=Math.min.apply(Math,i);return{col:i.indexOf(o),y:o}},e._getTopColGroup=function(t){if(t<2)return this.colYs;for(var i=[],o=this.cols+1-t,e=0;e<o;e++)i[e]=this._getColGroupY(e,t);return i},e._getColGroupY=function(t,i){if(i<2)return this.colYs[t];var o=this.colYs.slice(t,t+i);return Math.max.apply(Math,o)},e._getHorizontalColPosition=function(t,i){var o=this.horizontalColIndex%this.cols;o=t>1&&o+t>this.cols?0:o;var e=i.size.outerWidth&&i.size.outerHeight;return this.horizontalColIndex=e?o+t:this.horizontalColIndex,{col:o,y:this._getColGroupY(o,t)}},e._manageStamp=function(t){var o=i(t),e=this._getElementOffset(t),h=this._getOption("originLeft")?e.left:e.right,n=h+o.outerWidth,s=Math.floor(h/this.columnWidth);s=Math.max(0,s);var r=Math.floor(n/this.columnWidth);r-=n%this.columnWidth?0:1,r=Math.min(this.cols-1,r);for(var a=(this._getOption("originTop")?e.top:e.bottom)+o.outerHeight,u=s;u<=r;u++)this.colYs[u]=Math.max(a,this.colYs[u])},e._getContainerSize=function(){this.maxY=Math.max.apply(Math,this.colYs);var t={height:this.maxY};return this._getOption("fitWidth")&&(t.width=this._getContainerFitWidth()),t},e._getContainerFitWidth=function(){for(var t=0,i=this.cols;--i&&0===this.colYs[i];)t++;return(this.cols-t)*this.columnWidth-this.gutter},e.needsResizeLayout=function(){var t=this.containerWidth;return this.getContainerWidth(),t!=this.containerWidth},o});
 },{"outlayer":"../node_modules/outlayer/outlayer.js","get-size":"../node_modules/get-size/get-size.js"}],"bs.ts":[function(require,module,exports) {
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.createToast=u,exports.initBootstrap=f;var t=require("bootstrap"),e=r(require("masonry-layout")),n=require("./util");function r(t){return t&&t.__esModule?t:{default:t}}function a(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=o(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0,a=function(){};return{s:a,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:a}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,l=!0,c=!1;return{s:function(){n=t[Symbol.iterator]()},n:function(){var t=n.next();return l=t.done,t},e:function(t){c=!0,i=t},f:function(){try{l||null==n.return||n.return()}finally{if(c)throw i}}}}function o(t,e){if(t){if("string"==typeof t)return i(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(t,e):void 0}}function i(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function l(){var t,r=a((0,n.getElements)(".masonry"));try{for(r.s();!(t=r.n()).done;){var o=t.value;new e.default(o,{itemSelector:".masonry-item",percentPosition:!0})}}catch(i){r.e(i)}finally{r.f()}}function c(){var e,r=a((0,n.getElements)('[data-bs-toggle="tooltip"]'));try{for(r.s();!(e=r.n()).done;){var o=e.value;new t.Tooltip(o,{container:"body"})}}catch(i){r.e(i)}finally{r.f()}}function s(){var e,r=a((0,n.getElements)('[data-bs-toggle="modal"]'));try{for(r.s();!(e=r.n()).done;){var o=e.value;new t.Modal(o)}}catch(i){r.e(i)}finally{r.f()}}function u(e,n,r,a){var o="bi-exclamation-triangle-fill";switch(e){case"warning":o="bi-exclamation-triangle-fill";case"success":o="bi-check-circle-fill";case"info":o="bi-info-circle-fill";case"danger":o="bi-exclamation-triangle-fill"}var i=document.createElement("div");i.setAttribute("class","toast-container position-fixed bottom-0 end-0 m-3");var l=document.createElement("div");l.setAttribute("class","toast bg-".concat(e)),l.setAttribute("role","alert"),l.setAttribute("aria-live","assertive"),l.setAttribute("aria-atomic","true");var c=document.createElement("div");c.setAttribute("class","toast-header bg-".concat(e," text-body"));var s=document.createElement("i");s.setAttribute("class","bi ".concat(o));var u=document.createElement("strong");u.setAttribute("class","me-auto ms-1"),u.innerText=n;var d=document.createElement("button");d.setAttribute("type","button"),d.setAttribute("class","btn-close"),d.setAttribute("data-bs-dismiss","toast"),d.setAttribute("aria-label","Close");var f=document.createElement("div");if(f.setAttribute("class","toast-body"),c.appendChild(s),c.appendChild(u),void 0!==a){var b=document.createElement("small");b.setAttribute("class","text-muted"),c.appendChild(b)}return c.appendChild(d),f.innerText=r.trim(),l.appendChild(c),l.appendChild(f),i.appendChild(l),document.body.appendChild(i),new t.Toast(l)}function d(){var e=location.hash;if(e&&e.match(/^\#tab_.+$/)){var r,o=e.replace("tab_",""),i=a((0,n.getElements)('ul.nav.nav-tabs .nav-link[data-bs-target="'.concat(o,'"]')));try{for(i.s();!(r=i.n()).done;){var l=r.value;new t.Tab(l).show()}}catch(c){i.e(c)}finally{i.f()}}}function f(){for(var t=0,e=[c,s,l,d];t<e.length;t++){(0,e[t])()}}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.createToast=u,exports.initBootstrap=v;var t=require("bootstrap"),e=r(require("masonry-layout")),n=require("./util");function r(t){return t&&t.__esModule?t:{default:t}}function a(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=o(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0,a=function(){};return{s:a,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:a}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,l=!0,c=!1;return{s:function(){n=t[Symbol.iterator]()},n:function(){var t=n.next();return l=t.done,t},e:function(t){c=!0,i=t},f:function(){try{l||null==n.return||n.return()}finally{if(c)throw i}}}}function o(t,e){if(t){if("string"==typeof t)return i(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(t,e):void 0}}function i(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function l(){var t,r=a((0,n.getElements)(".masonry"));try{for(r.s();!(t=r.n()).done;){var o=t.value;new e.default(o,{itemSelector:".masonry-item",percentPosition:!0})}}catch(i){r.e(i)}finally{r.f()}}function c(){var e,r=a((0,n.getElements)('[data-bs-toggle="tooltip"]'));try{for(r.s();!(e=r.n()).done;){var o=e.value;new t.Tooltip(o,{container:"body"})}}catch(i){r.e(i)}finally{r.f()}}function s(){var e,r=a((0,n.getElements)('[data-bs-toggle="modal"]'));try{for(r.s();!(e=r.n()).done;){var o=e.value;new t.Modal(o)}}catch(i){r.e(i)}finally{r.f()}}function u(e,n,r,a){var o="bi-exclamation-triangle-fill";switch(e){case"warning":o="bi-exclamation-triangle-fill";case"success":o="bi-check-circle-fill";case"info":o="bi-info-circle-fill";case"danger":o="bi-exclamation-triangle-fill"}var i=document.createElement("div");i.setAttribute("class","toast-container position-fixed bottom-0 end-0 m-3");var l=document.createElement("div");l.setAttribute("class","toast bg-".concat(e)),l.setAttribute("role","alert"),l.setAttribute("aria-live","assertive"),l.setAttribute("aria-atomic","true");var c=document.createElement("div");c.setAttribute("class","toast-header bg-".concat(e," text-body"));var s=document.createElement("i");s.setAttribute("class","bi ".concat(o));var u=document.createElement("strong");u.setAttribute("class","me-auto ms-1"),u.innerText=n;var d=document.createElement("button");d.setAttribute("type","button"),d.setAttribute("class","btn-close"),d.setAttribute("data-bs-dismiss","toast"),d.setAttribute("aria-label","Close");var f=document.createElement("div");if(f.setAttribute("class","toast-body"),c.appendChild(s),c.appendChild(u),void 0!==a){var v=document.createElement("small");v.setAttribute("class","text-muted"),c.appendChild(v)}return c.appendChild(d),f.innerText=r.trim(),l.appendChild(c),l.appendChild(f),i.appendChild(l),document.body.appendChild(i),new t.Toast(l)}function d(){var e=location.hash;if(e&&e.match(/^\#tab_.+$/)){var r,o=e.replace("tab_",""),i=a((0,n.getElements)('ul.nav.nav-tabs .nav-link[data-bs-target="'.concat(o,'"]')));try{for(i.s();!(r=i.n()).done;){var l=r.value;new t.Tab(l).show()}}catch(c){i.e(c)}finally{i.f()}}}function f(){var t=document.querySelectorAll(".sidebar .accordion-item");function e(e){var n,r=a(t);try{for(r.s();!(n=r.n()).done;){var o=n.value;o!==e?o.classList.remove("is-open"):o.classList.toggle("is-open")}}catch(i){r.e(i)}finally{r.f()}}var n,r=a(t);try{var o=function(){var t,r=n.value,o=a(r.querySelectorAll(".accordion-button"));try{for(o.s();!(t=o.n()).done;){t.value.addEventListener("click",function(){e(r)})}}catch(i){o.e(i)}finally{o.f()}};for(r.s();!(n=r.n()).done;)o()}catch(i){r.e(i)}finally{r.f()}}function v(){for(var t=0,e=[c,s,l,d,f];t<e.length;t++){(0,e[t])()}}
 },{"bootstrap":"../node_modules/bootstrap/dist/js/bootstrap.esm.js","masonry-layout":"../node_modules/masonry-layout/masonry.js","./util":"util.ts"}],"../node_modules/just-debounce-it/index.js":[function(require,module,exports) {
 function n(n,t,u){var i=null,l=function(){i&&(clearTimeout(i),i=null)},r=function(){if(!t)return n.apply(this,arguments);var r=this,e=arguments,o=u&&!i;return l(),i=setTimeout(function(){if(i=null,!o)return n.apply(r,e)},t),o?n.apply(this,arguments):void 0};return r.cancel=l,r}module.exports=n;
 },{}],"search.ts":[function(require,module,exports) {

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">