feat(admin): add MoreSheet (native dialog) with grouped secondary nav

2026-06-17 14:21:24 -06:00
parent ef565fbfb1
commit 6d2c90ae6b
1 changed files with 111 additions and 0 deletions
@@ -0,0 +1,111 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useRef } from "react";
+
+const MORE_SECTIONS = [
+  {
+    heading: "Operations",
+    links: [
+      { label: "Pickup", href: "/admin/pickup", icon: "📦" },
+      { label: "Shipping", href: "/admin/shipping", icon: "🚚" },
+      { label: "Reports", href: "/admin/reports", icon: "📊" },
+      { label: "Analytics", href: "/admin/analytics", icon: "📈" },
+    ],
+  },
+  {
+    heading: "Marketing",
+    links: [
+      { label: "Communications", href: "/admin/communications", icon: "📧" },
+      { label: "Sales", href: "/admin/sales", icon: "💵" },
+    ],
+  },
+  {
+    heading: "Settings",
+    links: [
+      { label: "Settings", href: "/admin/settings", icon: "⚙️" },
+      { label: "Advanced", href: "/admin/advanced", icon: "🛠" },
+    ],
+  },
+];
+
+interface MoreSheetProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function MoreSheet({ open, onClose }: MoreSheetProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const lastFocusedRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open) {
+      lastFocusedRef.current = document.activeElement as HTMLElement | null;
+      if (!dialog.open) dialog.showModal();
+    } else if (dialog.open) {
+      dialog.close();
+      lastFocusedRef.current?.focus();
+    }
+  }, [open]);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const onCancel = (e: Event) => {
+      e.preventDefault();
+      onClose();
+    };
+    dialog.addEventListener("cancel", onCancel);
+    return () => dialog.removeEventListener("cancel", onCancel);
+  }, [onClose]);
+
+  return (
+    <dialog
+      ref={dialogRef}
+      onClick={(e) => {
+        // Click on the backdrop (the dialog element itself) closes; clicks on content don't
+        if (e.target === dialogRef.current) onClose();
+      }}
+      className="w-full max-w-[640px] p-0 m-0 ml-auto h-full max-h-screen backdrop:bg-black/40"
+      style={{
+        backgroundColor: "var(--color-bg)",
+        color: "var(--color-text)",
+        borderLeft: "1px solid var(--color-surface-3)",
+      }}
+    >
+      <div className="flex flex-col h-full overflow-y-auto">
+        <div className="sticky top-0 px-6 py-4 border-b" style={{ backgroundColor: "var(--color-bg)", borderColor: "var(--color-surface-3)" }}>
+          <h2 className="text-h1 font-display" style={{ fontWeight: 600 }}>More</h2>
+        </div>
+        <div className="px-6 py-6 space-y-8">
+          {MORE_SECTIONS.map((section) => (
+            <section key={section.heading}>
+              <h3 className="text-label font-semibold mb-3" style={{ color: "var(--color-text-muted)", letterSpacing: "0.02em" }}>
+                {section.heading.toUpperCase()}
+              </h3>
+              <ul className="space-y-1">
+                {section.links.map((link) => (
+                  <li key={link.href}>
+                    <Link
+                      href={link.href}
+                      onClick={onClose}
+                      className="flex items-center gap-3 px-4 py-4 rounded-xl active:bg-[var(--color-surface-2)] transition-colors"
+                      style={{ minHeight: "56px" }}
+                    >
+                      <span aria-hidden="true" className="text-2xl">{link.icon}</span>
+                      <span className="text-h2" style={{ fontWeight: 700 }}>{link.label}</span>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          ))}
+        </div>
+      </div>
+    </dialog>
+  );
+}
+
+export default MoreSheet;