70 lines
2.2 KiB
Text
70 lines
2.2 KiB
Text
---
|
|
const { pathname = "/" } = Astro.props;
|
|
|
|
const navItems = [
|
|
{ href: "/index.html", label: "Home", match: ["/index.html", "/"] },
|
|
{
|
|
href: "/about.html",
|
|
label: "About Us",
|
|
match: ["/about.html", "/the-founders.html", "/about-us-organizations.html"],
|
|
children: [
|
|
{ href: "/the-founders.html", label: "The Founders" },
|
|
{ href: "/about-us-organizations.html", label: "Organizations" },
|
|
],
|
|
},
|
|
{ href: "/videos.html", label: "Videos", match: ["/videos.html"] },
|
|
{
|
|
href: "/events.html",
|
|
label: "Events",
|
|
match: ["/events.html", "/services.html"],
|
|
children: [{ href: "/services.html", label: "Sunday Services" }],
|
|
},
|
|
{ href: "/speeches/", label: "Speeches", match: ["/speeches/"] },
|
|
{ href: "/contact.html", label: "Contact", match: ["/contact.html"] },
|
|
];
|
|
|
|
function isCurrent(item) {
|
|
return item.match.some((match) => {
|
|
if (match === "/") {
|
|
return pathname === "/";
|
|
}
|
|
if (match.endsWith("/")) {
|
|
return pathname.startsWith(match);
|
|
}
|
|
return pathname === match;
|
|
});
|
|
}
|
|
---
|
|
|
|
<nav id="access" class="jssafe" role="navigation">
|
|
<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
|
|
<div class="menu">
|
|
<ul id="prime_nav" class="menu">
|
|
{
|
|
navItems.map((item, index) => {
|
|
const current = isCurrent(item);
|
|
return (
|
|
<li class:list={["menu-item", item.children && "menu-item-has-children", current && "current-menu-item current_page_item", `menu-item-${index + 1}`]}>
|
|
<a href={item.href} aria-current={current ? "page" : undefined}>
|
|
<span>{item.label}</span>
|
|
</a>
|
|
{
|
|
item.children && (
|
|
<ul class="sub-menu">
|
|
{item.children.map((child, childIndex) => (
|
|
<li class={`menu-item menu-item-${index + 1}-${childIndex + 1}`}>
|
|
<a href={child.href}>
|
|
<span>{child.label}</span>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)
|
|
}
|
|
</li>
|
|
);
|
|
})
|
|
}
|
|
</ul>
|
|
</div>
|
|
</nav>
|