feat(navbar): add nested navigation support (#27)

* feat(navbar): add nested navigation support

Support one level of navbar children with a desktop dropdown and a mobile sidebar so projects can group related pages without changing the existing link API.

* fix(solutions): align new page content with global layout

* fix(content): left-align blog and resources layouts

* refactor(navbar): add shared link normalization model

* refactor(navbar): use normalized links for desktop menu

* refactor(navbar): share normalized links with mobile menu

* refactor(navbar): extract desktop dropdown link styles

* test(navbar): add runnable unit test setup

---------

Co-authored-by: Martin Wagner <22003632+Waldleufer@users.noreply.github.com>

Author: georg-schwarz

package.json

@@ -11,6 +11,7 @@
     "astro": "astro",
     "lint": "eslint src --ext .ts,.tsx,.astro",
     "typecheck": "astro check",
+    "test:unit": "vitest run --config vitest.unit.config.ts",
     "format": "prettier --write \"src/**/*.{ts,tsx,astro,css,md,mdx}\"",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build"

src/components/organisms/Navbar/Navbar.stories.tsx

@@ -31,6 +31,32 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
+export const WithDropdown: Story = {
+  args: {
+    links: [
+      { label: "About", href: "/about" },
+      {
+        label: "Solutions",
+        href: "/solutions",
+        items: [
+          { label: "Discovery", href: "/solutions/discovery" },
+          { label: "Synthesis", href: "/solutions/synthesis" },
+        ],
+      },
+      { label: "Resources", href: "/resources" },
+    ],
+  },
+};
+
+export const MobileDropdown: Story = {
+  args: WithDropdown.args,
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile1",
+    },
+  },
+};
+
 export const NavigatesToLink: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
@@ -40,3 +66,45 @@ export const NavigatesToLink: Story = {
     await expect(link).toHaveAttribute("href", "/about");
   },
 };
+
+export const OpensDropdown: Story = {
+  args: WithDropdown.args,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("link", { name: "Solutions" });
+
+    trigger.focus();
+    await expect(
+      canvas.getByRole("link", { name: "Discovery" }),
+    ).toHaveAttribute("href", "/solutions/discovery");
+  },
+};
+
+export const OpensMobileSidebar: Story = {
+  args: WithDropdown.args,
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile1",
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const menuButton = canvas.getByText("Open menu").closest("label");
+
+    if (!menuButton) {
+      throw new Error("Open menu control not found.");
+    }
+
+    await userEvent.click(menuButton);
+    const toggle = canvasElement.querySelector(
+      "#mobile-navigation-toggle",
+    ) as HTMLInputElement | null;
+
+    if (!toggle) {
+      throw new Error("Mobile navigation toggle not found.");
+    }
+
+    await expect(toggle.checked).toBe(true);
+    await expect(canvas.getByLabelText("Navigation menu")).toBeInTheDocument();
+  },
+};

src/components/organisms/Navbar/Navbar.tsx

@@ -1,24 +1,214 @@
 import { withBase } from "@/components/utils/with-base";
+import {
+  normalizeNavbarLinks,
+  type NormalizedNavbarItem,
+} from "./Navbar.utils";
 import type { NavbarProps } from "./Navbar.types";
 
-export const Navbar = ({ siteName, links }: NavbarProps) => (
-  <header className="sticky top-0 z-50 border-b border-secondary-200 bg-white/80 backdrop-blur-sm">
-    <nav className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
-      <a
-        href={withBase("/")}
-        className="text-xl font-bold text-primary-600 hover:text-primary-700"
-      >
-        {siteName}
-      </a>
-      <ul className="flex items-center gap-6 text-sm font-medium">
-        {links.map((link) => (
-          <li key={`${link.label}-${link.href}`}>
-            <a href={withBase(link.href)} className="hover:text-primary-600">
-              {link.label}
+interface MobileLinkListProps {
+  links: readonly NormalizedNavbarItem[];
+}
+
+const desktopLinkClassName =
+  "inline-flex items-center gap-2 rounded-full px-3 py-2 transition-colors hover:bg-secondary-50 hover:text-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2";
+
+const mobileLinkClassName =
+  "block rounded-lg px-3 py-2 text-base transition-colors hover:bg-secondary-50 hover:text-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2";
+
+const desktopDropdownLinkClassName =
+  "block rounded-xl px-3 py-2 transition-colors hover:bg-secondary-50 hover:text-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2";
+
+const MobileLinkList = ({ links }: MobileLinkListProps) => (
+  <ul className="flex flex-col gap-2 text-sm font-medium text-secondary-900">
+    {links.map((item) => {
+      if (item.type === "single") {
+        return (
+          <li key={item.key}>
+            <a href={withBase(item.link.href)} className={mobileLinkClassName}>
+              {item.link.label}
             </a>
           </li>
-        ))}
-      </ul>
-    </nav>
-  </header>
+        );
+      }
+
+      return (
+        <li key={item.key}>
+          <details className="group">
+            <summary
+              className={`${mobileLinkClassName} flex cursor-pointer list-none items-center justify-between gap-3 [&::-webkit-details-marker]:hidden`}
+            >
+              <span>{item.trigger.label}</span>
+              <svg
+                aria-hidden="true"
+                viewBox="0 0 10 6"
+                className="h-2.5 w-2.5 transition-transform group-open:rotate-180"
+              >
+                <path
+                  d="M1 1L5 5L9 1"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </summary>
+            <ul className="mt-1 flex flex-col gap-1 border-l border-secondary-200 pl-4">
+              {item.links.map((subItem) => (
+                <li key={subItem.key}>
+                  <a
+                    href={withBase(subItem.href)}
+                    className={mobileLinkClassName}
+                  >
+                    {subItem.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </details>
+        </li>
+      );
+    })}
+  </ul>
 );
+
+export const Navbar = ({ siteName, links }: NavbarProps) => {
+  const normalizedLinks = normalizeNavbarLinks(links);
+
+  return (
+    <div className="relative">
+      <input
+        id="mobile-navigation-toggle"
+        type="checkbox"
+        className="peer sr-only"
+        aria-hidden="true"
+        tabIndex={-1}
+      />
+
+      <header className="sticky top-0 z-40 border-b border-secondary-200 bg-white/80 backdrop-blur-sm">
+        <nav className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
+          <a
+            href={withBase("/")}
+            className="text-xl font-bold text-primary-600 transition-colors hover:text-primary-700"
+          >
+            {siteName}
+          </a>
+
+          <label
+            htmlFor="mobile-navigation-toggle"
+            className="inline-flex h-11 w-11 items-center justify-center rounded-full border border-secondary-200 text-secondary-900 transition-colors hover:border-primary-300 hover:text-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 sm:hidden"
+            aria-controls="mobile-navigation"
+            tabIndex={0}
+          >
+            <span className="sr-only">Open menu</span>
+            <svg aria-hidden="true" viewBox="0 0 24 24" className="h-5 w-5">
+              <path
+                d="M4 7H20M4 12H20M4 17H20"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.8"
+                strokeLinecap="round"
+              />
+            </svg>
+          </label>
+
+          <ul className="hidden items-center gap-3 text-sm font-medium sm:flex">
+            {normalizedLinks.map((item) => {
+              if (item.type === "single") {
+                return (
+                  <li key={item.key}>
+                    <a
+                      href={withBase(item.link.href)}
+                      className={desktopLinkClassName}
+                    >
+                      {item.link.label}
+                    </a>
+                  </li>
+                );
+              }
+
+              return (
+                <li key={item.key} className="group relative">
+                  <a
+                    href={withBase(item.trigger.href)}
+                    className={desktopLinkClassName}
+                  >
+                    <span>{item.trigger.label}</span>
+                    <svg
+                      aria-hidden="true"
+                      viewBox="0 0 10 6"
+                      className="h-2.5 w-2.5 transition-transform group-hover:rotate-180 group-focus-within:rotate-180"
+                    >
+                      <path
+                        d="M1 1L5 5L9 1"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  </a>
+                  <div className="pointer-events-none invisible absolute right-0 top-full pt-3 opacity-0 transition duration-150 group-hover:pointer-events-auto group-hover:visible group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:visible group-focus-within:opacity-100">
+                    <ul className="min-w-48 rounded-2xl border border-secondary-200 bg-white p-2 text-secondary-900 shadow-lg shadow-secondary-900/10">
+                      {item.links.map((subItem) => (
+                        <li key={subItem.key}>
+                          <a
+                            href={withBase(subItem.href)}
+                            className={desktopDropdownLinkClassName}
+                          >
+                            {subItem.label}
+                          </a>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+      </header>
+
+      <div
+        className="pointer-events-none fixed inset-0 z-50 bg-secondary-900/40 opacity-0 transition-opacity duration-200 peer-checked:pointer-events-auto peer-checked:opacity-100 sm:hidden"
+        aria-hidden="true"
+      />
+
+      <aside
+        id="mobile-navigation"
+        aria-label="Navigation menu"
+        className="fixed right-0 top-0 z-50 flex h-full w-[min(24rem,100vw)] translate-x-full flex-col border-l border-secondary-200 bg-white px-5 py-5 shadow-2xl transition-transform duration-200 peer-checked:translate-x-0 sm:hidden"
+      >
+        <div className="flex items-center justify-between gap-4 border-b border-secondary-200 pb-4">
+          <a
+            href={withBase("/")}
+            className="text-lg font-bold text-primary-600"
+          >
+            {siteName}
+          </a>
+          <label
+            htmlFor="mobile-navigation-toggle"
+            className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-secondary-200 text-secondary-900 transition-colors hover:border-primary-300 hover:text-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
+            tabIndex={0}
+          >
+            <span className="sr-only">Close menu</span>
+            <svg aria-hidden="true" viewBox="0 0 24 24" className="h-5 w-5">
+              <path
+                d="M6 6L18 18M18 6L6 18"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.8"
+                strokeLinecap="round"
+              />
+            </svg>
+          </label>
+        </div>
+
+        <div className="mt-6 overflow-y-auto">
+          <MobileLinkList links={normalizedLinks} />
+        </div>
+      </aside>
+    </div>
+  );
+};

src/components/organisms/Navbar/Navbar.types.ts

@@ -1,8 +1,13 @@
-export interface NavbarLinkItem {
+interface NavbarLinkShape {
   label: string;
   href: string;
+  items?: readonly NavbarSubLinkItem[];
 }
 
+export type NavbarSubLinkItem = Omit<NavbarLinkShape, "items">;
+
+export interface NavbarLinkItem extends NavbarLinkShape {}
+
 export interface NavbarProps {
   siteName: string;
   links: readonly NavbarLinkItem[];

src/components/organisms/Navbar/Navbar.utils.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+
+import { normalizeNavbarLinks } from "./Navbar.utils";
+
+describe("normalizeNavbarLinks", () => {
+  it("returns single item links unchanged", () => {
+    const items = normalizeNavbarLinks([{ label: "About", href: "/about" }]);
+
+    expect(items).toEqual([
+      {
+        type: "single",
+        key: "About-/about",
+        link: {
+          key: "About-/about",
+          label: "About",
+          href: "/about",
+        },
+      },
+    ]);
+  });
+
+  it("adds overview first for grouped links", () => {
+    const items = normalizeNavbarLinks([
+      {
+        label: "Solutions",
+        href: "/solutions",
+        items: [
+          { label: "Discovery", href: "/solutions/discovery" },
+          { label: "Synthesis", href: "/solutions/synthesis" },
+        ],
+      },
+    ]);
+
+    expect(items).toEqual([
+      {
+        type: "group",
+        key: "Solutions-/solutions",
+        trigger: {
+          key: "Solutions-/solutions",
+          label: "Solutions",
+          href: "/solutions",
+        },
+        links: [
+          {
+            key: "Overview-/solutions",
+            label: "Overview",
+            href: "/solutions",
+          },
+          {
+            key: "Discovery-/solutions/discovery",
+            label: "Discovery",
+            href: "/solutions/discovery",
+          },
+          {
+            key: "Synthesis-/solutions/synthesis",
+            label: "Synthesis",
+            href: "/solutions/synthesis",
+          },
+        ],
+      },
+    ]);
+  });
+});