feat(nav): add nested navigation with dropdown menus for About Us section

Author: eric15342335

src/app/about-us/annual-report/page.tsx

@@ -0,0 +1,10 @@
+import { Metadata } from "next";
+import { ComingSoon, comingSoonText } from "@/components/sections/coming-soon";
+import { buildPageMetadata } from "@/lib/config";
+
+const description = comingSoonText;
+export const metadata: Metadata = buildPageMetadata("/about-us/annual-report", { description });
+
+export default function AnnualReport() {
+  return <ComingSoon />;
+}

src/app/about-us/exco/page.tsx

@@ -0,0 +1,10 @@
+import { Metadata } from "next";
+import { ComingSoon, comingSoonText } from "@/components/sections/coming-soon";
+import { buildPageMetadata } from "@/lib/config";
+
+const description = comingSoonText;
+export const metadata: Metadata = buildPageMetadata("/about-us/exco", { description });
+
+export default function ExecutiveCommittee() {
+  return <ComingSoon />;
+}

src/app/about-us/our-story/page.tsx

@@ -0,0 +1,10 @@
+import { Metadata } from "next";
+import { ComingSoon, comingSoonText } from "@/components/sections/coming-soon";
+import { buildPageMetadata } from "@/lib/config";
+
+const description = comingSoonText;
+export const metadata: Metadata = buildPageMetadata("/about-us/our-story", { description });
+
+export default function OurStory() {
+  return <ComingSoon />;
+}

src/app/about-us/partners/page.tsx

@@ -0,0 +1,10 @@
+import { Metadata } from "next";
+import { ComingSoon, comingSoonText } from "@/components/sections/coming-soon";
+import { buildPageMetadata } from "@/lib/config";
+
+const description = comingSoonText;
+export const metadata: Metadata = buildPageMetadata("/about-us/partners", { description });
+
+export default function Partners() {
+  return <ComingSoon />;
+}

src/app/sitemap.ts

@@ -1,14 +1,14 @@
 import { MetadataRoute } from "next";
 import { siteConfig } from "@/lib/config";
-import { isInternalHref } from "@/lib/utils";
+import { isInternalHref, flattenByChildren } from "@/lib/utils";
 
 export const dynamic = "force-static";
 
 export default function sitemap(): MetadataRoute.Sitemap {
   const rawSiteUrl = process.env.SITE_URL || "";
   const siteUrl = rawSiteUrl.replace(/\/$/, ""); // remove trailing slash
 
-  const allNavs = [...siteConfig.mainNav, ...siteConfig.utilityNav];
+  const allNavs = [...flattenByChildren(siteConfig.mainNav), ...flattenByChildren(siteConfig.utilityNav)];
 
   return allNavs
     .filter((route) => isInternalHref(route.href))

src/components/sections/header.tsx

@@ -7,6 +7,8 @@ import {
   NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
 } from "@/components/ui/navigation-menu";
 import { ModeToggle } from "@/components/primitives/mode-toggle";
 import { Menu, Mail } from "lucide-react";
@@ -18,9 +20,11 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/component
 import { Button } from "@/components/ui/button";
 import { AnimatePresence, motion } from "framer-motion";
 import { useState } from "react";
+import { useRouter } from "next/navigation";
 
 export function Header() {
   const [isOpen, setIsOpen] = useState(false);
+  const router = useRouter();
 
   return (
     <Collapsible
@@ -44,18 +48,45 @@ export function Header() {
                 />
                 <span className="font-semibold">ALPHA HKU</span>
               </Link>
-              <nav className="hidden lg:flex items-center gap-6 text-sm">
-                <NavigationMenu>
-                  <NavigationMenuList>
+              <nav className="hidden lg:flex">
+                <NavigationMenu viewport={false}>
+                  <NavigationMenuList className="gap-0">
                     {siteConfig.mainNav.map((link) => (
                       <NavigationMenuItem key={link.href}>
-                        <NavigationMenuLink asChild>
-                          {isInternalHref(link.href) ? (
-                            <Link href={link.href}>{link.label}</Link>
-                          ) : (
-                            <a href={link.href}>{link.label}</a>
-                          )}
-                        </NavigationMenuLink>
+                        {link.children && link.children.length > 0 ? (
+                          <>
+                            <NavigationMenuTrigger
+                              className="p-2 font-normal bg-transparent"
+                              onClick={() => router.push(link.href)}
+                            >
+                              {link.label}
+                            </NavigationMenuTrigger>
+                            <NavigationMenuContent>
+                              <div className="w-28">
+                                {link.children.map((child) => (
+                                  <NavigationMenuLink
+                                    key={child.href}
+                                    asChild
+                                  >
+                                    {isInternalHref(child.href) ? (
+                                      <Link href={child.href}>{child.label}</Link>
+                                    ) : (
+                                      <a href={child.href}>{child.label}</a>
+                                    )}
+                                  </NavigationMenuLink>
+                                ))}
+                              </div>
+                            </NavigationMenuContent>
+                          </>
+                        ) : (
+                          <NavigationMenuLink asChild>
+                            {isInternalHref(link.href) ? (
+                              <Link href={link.href}>{link.label}</Link>
+                            ) : (
+                              <a href={link.href}>{link.label}</a>
+                            )}
+                          </NavigationMenuLink>
+                        )}
                       </NavigationMenuItem>
                     ))}
                   </NavigationMenuList>
@@ -126,25 +157,51 @@ export function Header() {
                 <div className="border-b border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
                   <div className="container px-4 lg:px-6 py-4">
                     <nav className="grid gap-4 text-sm">
-                      {siteConfig.mainNav.map((link) =>
-                        isInternalHref(link.href) ? (
-                          <Link
-                            key={link.href}
-                            href={link.href}
-                            className="hover:text-foreground/80"
-                          >
-                            {link.label}
-                          </Link>
-                        ) : (
-                          <a
-                            key={link.href}
-                            href={link.href}
-                            className="hover:text-foreground/80"
-                          >
-                            {link.label}
-                          </a>
-                        )
-                      )}
+                      {siteConfig.mainNav.map((link) => (
+                        <div
+                          key={link.href}
+                          className="grid gap-4"
+                        >
+                          {isInternalHref(link.href) ? (
+                            <Link
+                              href={link.href}
+                              className="hover:text-foreground/80"
+                            >
+                              {link.label}
+                            </Link>
+                          ) : (
+                            <a
+                              href={link.href}
+                              className="hover:text-foreground/80"
+                            >
+                              {link.label}
+                            </a>
+                          )}
+                          {link.children && link.children.length > 0 && (
+                            <div className="ml-4 grid gap-2">
+                              {link.children.map((child) =>
+                                isInternalHref(child.href) ? (
+                                  <Link
+                                    key={child.href}
+                                    href={child.href}
+                                    className="hover:text-foreground/80"
+                                  >
+                                    {child.label}
+                                  </Link>
+                                ) : (
+                                  <a
+                                    key={child.href}
+                                    href={child.href}
+                                    className="hover:text-foreground/80"
+                                  >
+                                    {child.label}
+                                  </a>
+                                )
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      ))}
                     </nav>
                   </div>
                 </div>

src/lib/config.ts

@@ -1,19 +1,29 @@
 import { MetadataRoute } from "next";
-import { isInternalHref } from "@/lib/utils";
+import { isInternalHref, flattenByChildren } from "@/lib/utils";
 import type { Metadata } from "next";
 
 type NavItem = {
   href: string;
   label: string;
   priority?: MetadataRoute.Sitemap[0]["priority"];
   changeFrequency?: MetadataRoute.Sitemap[0]["changeFrequency"];
+  children?: NavItem[];
 };
 
 const donateLink = "mailto:alphahku1213@gmail.com?subject=Donation%20Inquiry";
 
 const mainNav: NavItem[] = [
   { href: "/", label: "Home" },
-  { href: "/about-us", label: "About Us" },
+  {
+    href: "/about-us",
+    label: "About Us",
+    children: [
+      { href: "/about-us/our-story", label: "Our Story" },
+      { href: "/about-us/annual-report", label: "Annual Report" },
+      { href: "/about-us/exco", label: "Executive Committee" },
+      { href: "/about-us/partners", label: "Partners" },
+    ],
+  },
   { href: "/upcoming-event", label: "Upcoming Event" },
   { href: "/our-work", label: "Our Work" },
   { href: "/blog", label: "Blog" },
@@ -39,17 +49,15 @@ export const siteConfig = {
   seoImageHeight: 802,
   mainNav,
   utilityNav,
-  staticRoutes: [
-    ...mainNav
-      .filter((item) => isInternalHref(item.href))
-      .map((item) => (item.href === "/" ? "" : item.href)),
-  ],
+  staticRoutes: flattenByChildren(mainNav)
+    .filter((item) => isInternalHref(item.href))
+    .map((item) => (item.href === "/" ? "" : item.href)),
 };
 
 export function getNavLabel(path: string): string | undefined {
   // normalize trailing slash
   const normalized = path === "/" ? "/" : path.replace(/\/$/, "");
-  return siteConfig.mainNav.find((i) => i.href === normalized)?.label;
+  return flattenByChildren(siteConfig.mainNav).find((i) => i.href === normalized)?.label;
 }
 
 export function buildPageMetadata(

src/lib/utils.ts

@@ -25,3 +25,7 @@ export function isInternalHref(href: string): boolean {
   if (href.startsWith("//")) return false; // protocol-relative
   return true;
 }
+
+export function flattenByChildren<T extends { children?: T[] }>(items: T[]): T[] {
+  return items.flatMap((item) => [item, ...(item.children ? flattenByChildren(item.children) : [])]);
+}