import * as React from "react";
import { Link, useLocation } from "@tanstack/react-router";
import { ChevronRight } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { NavOpenStoreContext, NavPathContext, useNavOpenStore } from "./nav-open-state";
export type NestedNavNode = {
to?: string;
label: string;
icon?: LucideIcon;
badge?: number;
children?: NestedNavNode[];
/** When true, `to` is an external URL and opens in a new tab. */
external?: boolean;
/** When true, active state requires an exact pathname match (no prefix). */
exact?: boolean;
/** Optional URL hash appended to `to` (e.g. "ai" for /settings#ai). */
hash?: string;
/** RBAC gate — when set, the item is hidden unless the current user has it. */
permission?: string;
};
export function NestedNavGroup({ children, pathPrefix }: { children: React.ReactNode; pathPrefix?: string }) {
const parentStore = React.useContext(NavOpenStoreContext);
const parentPath = React.useContext(NavPathContext);
// The outermost group owns the persisted store; nested groups reuse it.
const ownStore = useNavOpenStore();
const store = parentStore ?? ownStore;
const path = pathPrefix ? (parentPath ? `${parentPath}.${pathPrefix}` : pathPrefix) : parentPath;
return (
{children}
);
}
/**
* NestedNavItem — sidebar row supporting arbitrary depth via
* Collapsible. Auto-opens whenever a descendant matches the URL.
* When nested inside a , only one sibling stays open.
*/
export function NestedNavItem({
node,
depth = 0,
collapsed = false,
itemKey,
touch = false,
}: {
node: NestedNavNode;
depth?: number;
collapsed?: boolean;
itemKey?: string;
/** Larger, finger-friendly row heights for drawer/bottom-sheet usage. */
touch?: boolean;
}) {
const location = useLocation();
const paths = collectPaths(node);
const hasChildren = !!node.children?.length;
const activeDescendant = paths.some((p) => location.pathname === p || location.pathname.startsWith(p + "/"));
const currentHash = typeof location.hash === "string" ? location.hash.replace(/^#/, "") : "";
const pathMatches = node.to
? node.exact
? location.pathname === node.to
: location.pathname === node.to || location.pathname.startsWith(node.to + "/")
: false;
const activeSelf = node.to
? node.hash !== undefined
? location.pathname === node.to && currentHash === node.hash
: pathMatches
: false;
const key = itemKey ?? node.to ?? node.label;
const parentPath = React.useContext(NavPathContext);
const fullKey = parentPath ? `${parentPath}.${key}` : key;
const store = React.useContext(NavOpenStoreContext);
const [localOpen, setLocalOpen] = React.useState(activeDescendant);
const open = store ? store.isOpen(fullKey) : localOpen;
const setOpen = React.useCallback(
(next: boolean) => {
if (store) store.setOpen(fullKey, next);
else setLocalOpen(next);
},
[store, fullKey],
);
// Each level remembers its own open/closed state. We only auto-open the
// section that owns the active route (when nothing was persisted for it) —
// navigation never force-closes a section the user left open.
const didInit = React.useRef(false);
React.useEffect(() => {
if (store && !store.hydrated) return;
if (!didInit.current) {
didInit.current = true;
if (store?.hasStored) return;
if (activeDescendant) setOpen(true);
return;
}
if (activeDescendant && !open) setOpen(true);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [activeDescendant, location.pathname, store?.hydrated]);
const Icon = node.icon;
const showIcon = depth === 0 && !!Icon;
const isChild = depth > 0;
// A child row that itself has children is a section label (e.g. "WhatsApp").
const isCategory = isChild && hasChildren;
const isLeaf = !hasChildren;
const row = (
{activeSelf && isChild && isLeaf && (
)}
{isChild && isLeaf && (
)}
{showIcon && Icon ? (
) : null}
{!collapsed && (
<>
{node.label}
{typeof node.badge === "number" && node.badge > 0 && (
{node.badge > 99 ? "99+" : node.badge}
)}
{hasChildren && (
)}
)}
);
const linkWrap = (child: React.ReactNode) => {
if (!node.to) return child;
if (node.external) {
return (
{child}
);
}
return (
{child}
);
};
if (!hasChildren) {
return node.to ? linkWrap(row) : row;
}
return (
{node.to ? (
linkWrap(row)
) : (
)}
{node.children!.map((child, i) => {
const childKey = (child.to ?? child.label) + i;
return (
);
})}
);
}
function collectPaths(n: NestedNavNode): string[] {
const out: string[] = [];
const walk = (node: NestedNavNode) => {
if (node.to) out.push(node.to);
node.children?.forEach(walk);
};
walk(n);
return out;
}