97 lines
3.5 KiB
Text
97 lines
3.5 KiB
Text
<header class="site-header" id="siteHeader">
|
|
<div class="container nav-wrap">
|
|
<a href="/" class="brand" aria-label="<%= (config?.brand?.name || 'AutoTQ') %> home">
|
|
<img src="<%= config?.assets?.logo || '' %>" alt="<%= (config?.brand?.name || 'AutoTQ') %> logo" loading="eager" />
|
|
<span><%= (config?.brand?.name || 'AutoTQ') %></span>
|
|
</a>
|
|
|
|
<button
|
|
class="mobile-toggle"
|
|
id="mobileToggle"
|
|
aria-label="Toggle navigation"
|
|
aria-controls="siteNav"
|
|
aria-expanded="false"
|
|
>
|
|
<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">
|
|
<% 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>
|
|
<% }) %>
|
|
|
|
<% 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>
|
|
</div>
|
|
</header>
|