Update header partial with grouped navigation dropdowns

views/partials/header.ejs

@@ -15,14 +15,81 @@
       <span></span><span></span><span></span>
     </button>
 
+    <% 
+      const navItems = (config?.nav || []);
+      const mainItems = [];
+      const productItems = [];
+      const resourceItems = [];
+
+      navItems.forEach((item) => {
+        const key = `${item.label || ''} ${item.href || ''}`.toLowerCase();
+
+        if ((item.href || '') === '/') {
+          mainItems.push(item);
+          return;
+        }
+
+        if (/about/.test(key)) {
+          mainItems.push(item);
+          return;
+        }
+
+        if (/shop|training|report/.test(key)) {
+          productItems.push(item);
+          return;
+        }
+
+        if (/literature|testimonial|first|occlusion|news|update|video|media/.test(key)) {
+          resourceItems.push(item);
+          return;
+        }
+
+        mainItems.push(item);
+      });
+
+      const uniqueByHref = (arr) => arr.filter((it, idx, src) => src.findIndex(x => x.href === it.href) === idx);
+      const main = uniqueByHref(mainItems);
+      const products = uniqueByHref(productItems);
+      const resources = uniqueByHref(resourceItems);
+    %>
+
     <nav class="site-nav" id="siteNav" aria-label="Primary navigation">
       <div class="nav-links">
-        <% (config?.nav || []).forEach(item => {
+        <% main.forEach(item => {
           const itemPage = item.href === '/' ? 'home' : item.href.replace(/^\//, '').toLowerCase();
           const active = pageName === itemPage;
         %>
-        <a href="<%= item.href %>" class="<%= active ? 'active' : '' %>" <%= active ? 'aria-current="page"' : '' %>><%= item.label %></a>
+          <a href="<%= item.href %>" class="<%= active ? 'active' : '' %>" <%= active ? 'aria-current="page"' : '' %>><%= item.label %></a>
         <% }) %>
+
+        <% if (products.length) { %>
+          <details class="nav-dropdown">
+            <summary>Solutions</summary>
+            <div class="dropdown-menu" role="menu" aria-label="Solutions">
+              <% products.forEach(item => {
+                const itemPage = item.href === '/' ? 'home' : item.href.replace(/^\//, '').toLowerCase();
+                const active = pageName === itemPage;
+              %>
+                <a href="<%= item.href %>" class="<%= active ? 'active' : '' %>" <%= active ? 'aria-current="page"' : '' %>><%= item.label %></a>
+              <% }) %>
+            </div>
+          </details>
+        <% } %>
+
+        <% if (resources.length) { %>
+          <details class="nav-dropdown">
+            <summary>Resources</summary>
+            <div class="dropdown-menu" role="menu" aria-label="Resources">
+              <% resources.forEach(item => {
+                const itemPage = item.href === '/' ? 'home' : item.href.replace(/^\//, '').toLowerCase();
+                const active = pageName === itemPage;
+              %>
+                <a href="<%= item.href %>" class="<%= active ? 'active' : '' %>" <%= active ? 'aria-current="page"' : '' %>><%= item.label %></a>
+              <% }) %>
+            </div>
+          </details>
+        <% } %>
+
         <a href="/contact" class="nav-cta nav-cta-link <%= pageName === 'contact' ? 'active' : '' %>" aria-label="Contact AutoTQ" <%= pageName === 'contact' ? 'aria-current="page"' : '' %>>Contact</a>
       </div>
     </nav>