Add comments

layouts/partials/navigation/nav-item.html

@@ -44,6 +44,7 @@
 
 <li class="menu-row {{ if .NavPage.IsPage }}child{{end}}" style="overflow: hidden;" data-roles="{{ $roles }}">
     <div class="link level-{{ .Level }}">
+        <!-- data-target is used by the scrollspy on presidium-js to determine which section of the page the <a> corresponds to -->
         <a class="level-{{ .Level }} {{ if eq .Index 0 }}first-child{{end}}" data-slug="{{ $slug }}" data-target="#{{$uid}}" data-id="{{ $articleId }}" href="{{ $articleLink }}">
             {{ if $hasChildren }}
                 <div class="menu-expander" aria-controls="{{$uid}}">

layouts/partials/page/script.html

@@ -27,7 +27,7 @@
     $menu.toggleClass('expanded', !isOpen).toggleClass('', isOpen);
   });
 
-  //Handle open and closing of nav-items
+  // Handle collapsing of nav-items
   const toggleMenu = ($menu, isOpen) => {
     const $ul = $menu.find('ul').first();
 
@@ -44,6 +44,7 @@
             .toggleClass('glyphicon-chevron-right', !isOpen);
   };
 
+  // Bootstrap collapse events
   $('li.menu-row').on('show.bs.collapse', (event) => {
     event.stopPropagation();
     const $menu = $(event.currentTarget);
@@ -121,6 +122,7 @@
       },
   });
 
+  // Ensure nav-items fit within the viewport without overlapping the header
   document.addEventListener("DOMContentLoaded", function () {
     const navbarHeader = document.querySelector(".navbar-header");
     const navbarItems = document.querySelector(".navbar-items");
@@ -131,7 +133,7 @@
       navbarItems.style.maxHeight = `calc(100vh - ${headerHeight}px)`;
     }
 
-    // Optional: Adjust height dynamically during window resize
+    // Adjust height dynamically during window resize
     window.addEventListener("resize", function () {
       if (navbarHeader && navbarItems) {
         const headerHeight = navbarHeader.offsetHeight;