Nora
123 lines
4.1 KiB
TypeScript
123 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useRef } from "react";
|
|
|
|
/**
|
|
* "More" sheet shown when the user taps the "More" tab in the mobile
|
|
* bottom tab bar (src/components/admin/MobileTabBar.tsx).
|
|
*
|
|
* NOTE: The primary navigation tabs (Orders / Stops / Products / Dashboard)
|
|
* live in the bottom tab bar itself, NOT in this sheet. This sheet
|
|
* intentionally exposes only the secondary operations so the tab bar can
|
|
* stay focused on the high-frequency workflows. If you need to add a
|
|
* primary tab here, do it in MobileTabBar instead.
|
|
*
|
|
* (PR 6 cutover: the v1 /admin/orders, /admin/stops, /admin/products
|
|
* paths now 307-redirect to /admin/v2/* via next.config.ts — see
|
|
* `redirects()` there.)
|
|
*/
|
|
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}
|
|
aria-label="More navigation"
|
|
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;
|