219 lines
8.5 KiB
TypeScript
219 lines
8.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { ChevronDown, Menu, X } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export type NavLeaf = { href: string; label: string };
|
|
export type NavItem =
|
|
| { kind: "link"; href: string; label: string; icon: React.ReactNode }
|
|
| { kind: "group"; label: string; icon: React.ReactNode; children: NavLeaf[] };
|
|
|
|
// A group is active when the current path is one of its children, or sits under one
|
|
// of them. A child of "/" only matches exactly — otherwise every route would count as
|
|
// "under" the dashboard.
|
|
function isGroupActive(item: Extract<NavItem, { kind: "group" }>, pathname: string): boolean {
|
|
return item.children.some((c) =>
|
|
c.href === "/" ? pathname === "/" : pathname === c.href || pathname.startsWith(`${c.href}/`),
|
|
);
|
|
}
|
|
|
|
// The desktop rail and the mobile drawer render the same list from this one
|
|
// component, so the two navs can never drift apart.
|
|
function NavList({ items, onNavigate }: { items: NavItem[]; onNavigate?: () => void }) {
|
|
const pathname = usePathname();
|
|
return (
|
|
<nav className="p-3 space-y-0.5 text-sm">
|
|
{items.map((item, i) =>
|
|
item.kind === "link" ? (
|
|
<LeafLink
|
|
key={i}
|
|
href={item.href}
|
|
label={item.label}
|
|
icon={item.icon}
|
|
active={pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href))}
|
|
onClick={onNavigate}
|
|
/>
|
|
) : (
|
|
<Group key={i} item={item} active={isGroupActive(item, pathname)} />
|
|
)
|
|
)}
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Desktop rail only. It is `hidden lg:block`, so it contributes ZERO width below
|
|
* `lg` and must stay a pure sibling of `<main>` — anything visible on mobile
|
|
* rendered in this flex row steals width from the page. The mobile trigger lives
|
|
* in the header instead; see `MobileNav`.
|
|
*/
|
|
export function Sidebar({ items }: { items: NavItem[] }) {
|
|
return (
|
|
<aside className="hidden lg:block w-64 shrink-0 bg-white dark:bg-surface-muted border-r border-gray-200 dark:border-border min-h-[calc(100vh-4rem)]">
|
|
<NavList items={items} />
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Mobile nav: the hamburger plus the drawer it opens. Rendered INSIDE the header,
|
|
* which is the whole point — the old version put the button in the content flex
|
|
* row, where its 36px was subtracted from every page below `lg` and indented the
|
|
* entire site on phones and tablets.
|
|
*
|
|
* The header is full-bleed, so a 44px trigger there costs no content width.
|
|
* `-ml-3` pulls the hit area into the header's own `px-4`, which lands the icon's
|
|
* left edge exactly on the logo's (16px) without changing the logo's position.
|
|
*/
|
|
export function MobileNav({ items }: { items: NavItem[] }) {
|
|
const pathname = usePathname();
|
|
const [open, setOpen] = useState(false);
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
// Close drawer on navigation
|
|
useEffect(() => {
|
|
setOpen(false);
|
|
}, [pathname]);
|
|
|
|
// Scroll lock, plus the SSR gate for the portal below — `document` does not
|
|
// exist while this component is server-rendered.
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
document.body.style.overflow = open ? "hidden" : "";
|
|
return () => {
|
|
document.body.style.overflow = "";
|
|
};
|
|
}, [open]);
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(true)}
|
|
aria-label="Open navigation"
|
|
aria-expanded={open}
|
|
className="lg:hidden -ml-3 w-11 h-11 shrink-0 grid place-items-center rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 text-gray-500 dark:text-gray-400"
|
|
>
|
|
<Menu className="w-5 h-5" />
|
|
</button>
|
|
|
|
{/* ⚠️ THE PORTAL IS LOAD-BEARING — do not "simplify" it back to inline JSX.
|
|
The header carries `backdrop-blur`, and a filter/backdrop-filter makes an
|
|
element the containing block for its `position: fixed` descendants. Inline,
|
|
this drawer would size and position itself against the 64px header box
|
|
instead of the viewport — a 64px-tall sliver pinned under the header.
|
|
Portalling to <body> returns it to the root stacking context.
|
|
|
|
This is the same trap class as MachineCombobox: a portal is NOT a DOM
|
|
descendant of the component that made it, so any hit-testing that reaches
|
|
across this boundary (click-away, focus traps) will read as "outside". */}
|
|
{mounted &&
|
|
createPortal(
|
|
<>
|
|
{open && (
|
|
<div
|
|
className="lg:hidden fixed inset-0 z-[1200] bg-black/40"
|
|
onClick={() => setOpen(false)}
|
|
/>
|
|
)}
|
|
<aside
|
|
className={cn(
|
|
"lg:hidden fixed top-0 left-0 bottom-0 z-[1300] w-72 bg-white dark:bg-surface-muted shadow-2xl transition-transform",
|
|
open ? "translate-x-0" : "-translate-x-full"
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-between px-4 h-16 border-b border-gray-200 dark:border-border">
|
|
<div className="flex items-center gap-2">
|
|
<img
|
|
src="/brand/logo.png"
|
|
alt="Mega Plant"
|
|
className="w-8 h-8 rounded-xl object-contain bg-white dark:bg-bg shadow-sm"
|
|
/>
|
|
<span className="text-sm font-semibold text-[#003D5B] dark:text-white">Mega Plant</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(false)}
|
|
aria-label="Close navigation"
|
|
className="w-11 h-11 grid place-items-center rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 text-gray-500 dark:text-gray-400"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
<NavList items={items} onNavigate={() => setOpen(false)} />
|
|
</aside>
|
|
</>,
|
|
document.body,
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function LeafLink({
|
|
href, label, icon, active, onClick,
|
|
}: {
|
|
href: string; label: string; icon: React.ReactNode; active: boolean; onClick?: () => void;
|
|
}) {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
onClick={onClick}
|
|
className={cn(
|
|
"min-h-11 flex items-center gap-3 px-3 py-2 rounded-lg font-medium transition",
|
|
active
|
|
? "bg-gradient-to-r from-[#30638E]/10 to-[#00798C]/5 text-[#003D5B] dark:from-[#30638E]/20 dark:to-[#00798C]/10 dark:text-white"
|
|
: "text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 hover:text-gray-900 dark:hover:text-white"
|
|
)}
|
|
>
|
|
<span className={cn(active ? "text-accent-ink" : "text-gray-400")}>{icon}</span>
|
|
<span>{label}</span>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
function Group({ item, active }: { item: Extract<NavItem, { kind: "group" }>; active: boolean }) {
|
|
const [open, setOpen] = useState(active);
|
|
const pathname = usePathname();
|
|
return (
|
|
<div>
|
|
<button
|
|
onClick={() => setOpen((o) => !o)}
|
|
className={cn(
|
|
"w-full min-h-11 flex items-center gap-3 px-3 py-2 rounded-lg font-medium transition",
|
|
active
|
|
? "text-[#003D5B] dark:text-white"
|
|
: "text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 hover:text-gray-900 dark:hover:text-white"
|
|
)}
|
|
>
|
|
<span className={cn(active ? "text-accent-ink" : "text-gray-400")}>{item.icon}</span>
|
|
<span className="flex-1 text-left">{item.label}</span>
|
|
<ChevronDown className={cn("w-4 h-4 text-gray-400 transition-transform", open && "rotate-180")} />
|
|
</button>
|
|
{open && (
|
|
<div className="ml-7 mt-0.5 space-y-0.5 border-l-2 border-gray-100 dark:border-border pl-2">
|
|
{item.children.map((child) => {
|
|
const childActive = pathname === child.href;
|
|
return (
|
|
<Link
|
|
key={child.href}
|
|
href={child.href}
|
|
className={cn(
|
|
"flex items-center min-h-11 px-3 py-1.5 rounded-lg text-xs font-medium transition",
|
|
childActive
|
|
? "bg-[#30638E]/10 text-[#30638E] dark:bg-[#00798C]/15 dark:text-[#00798C]"
|
|
: "text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-white/5 hover:text-gray-900 dark:hover:text-white"
|
|
)}
|
|
>
|
|
{child.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|