using astro

src/components/SiteNav.astro

@@ -0,0 +1,70 @@
+---
+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>