import { useState, useMemo } from "react"; import { Text, Group, Box, UnstyledButton, Badge, ScrollArea, TextInput, Collapse, } from "@mantine/core"; import { HiMagnifyingGlass, HiChevronRight, HiChevronDown } from "react-icons/hi2"; import { SidebarShell } from "./SidebarShell"; import type { SidebarNavProps, SidebarLink, SidebarSection } from "./types"; const SKY = "#4fc3f7"; function LinkItem({ link, onClick, highlight, }: { link: SidebarLink; onClick: (link: SidebarLink) => void; highlight?: boolean; }) { return ( onClick(link)} w="100%" px="sm" py={5} pl={28} style={{ borderRadius: 4, transition: "background-color 150ms ease", backgroundColor: highlight ? "#fff3bf" : "transparent", }} onMouseOver={(e) => { e.currentTarget.style.backgroundColor = highlight ? "#ffe066" : "#e3f2fd"; }} onMouseOut={(e) => { e.currentTarget.style.backgroundColor = highlight ? "#fff3bf" : "transparent"; }} > {link.icon} {link.label} {link.badge && ( {link.badge} )} ); } function matchesSearch(query: string, link: SidebarLink): boolean { return link.label.toLowerCase().includes(query.toLowerCase()); } function sectionMatchesSearch(query: string, section: SidebarSection): boolean { if (!query) return false; const directMatch = section.links.some((l) => matchesSearch(query, l)); const subMatch = section.subSections?.some((sub) => sub.links.some((l) => matchesSearch(query, l)), ); return directMatch || (subMatch ?? false); } export function Variant3_GroupedSearch({ sections, onLinkClick }: SidebarNavProps) { const [search, setSearch] = useState(""); const [openGroups, setOpenGroups] = useState>(new Set()); const [openSections, setOpenSections] = useState>(new Set()); const handleClick = onLinkClick ?? (() => {}); const groups = useMemo(() => { const map = new Map(); for (const section of sections) { const arr = map.get(section.group) ?? []; arr.push(section); map.set(section.group, arr); } return Array.from(map.entries()); }, [sections]); const isSearching = search.trim().length > 0; const toggleGroup = (group: string) => { setOpenGroups((prev) => { const next = new Set(prev); if (next.has(group)) next.delete(group); else next.add(group); return next; }); }; const toggleSection = (id: string) => { setOpenSections((prev) => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next; }); }; return ( {/* Search */} } value={search} onChange={(e) => setSearch(e.currentTarget.value)} variant="filled" size="sm" /> {groups.map(([group, sects]) => { const filteredSects = isSearching ? sects.filter( (s) => s.label.toLowerCase().includes(search.toLowerCase()) || sectionMatchesSearch(search, s), ) : sects; if (isSearching && filteredSects.length === 0) return null; const groupOpen = isSearching || openGroups.has(group); return (

{/* Sticky group header */} !isSearching && toggleGroup(group)} w="100%" px="md" py={8} style={{ position: "sticky", top: 0, zIndex: 2, backgroundColor: "#f1f3f5", borderBottom: "1px solid #e9ecef", }} > {group} {!isSearching && (groupOpen ? ( ) : ( ))} {filteredSects.map((section) => { const sectionOpen = isSearching || openSections.has(section.id); return (

!isSearching && toggleSection(section.id)} w="100%" px="md" py={7} pl={20} style={{ transition: "background-color 150ms ease", }} onMouseOver={(e) => { e.currentTarget.style.backgroundColor = "#f1f3f5"; }} onMouseOut={(e) => { e.currentTarget.style.backgroundColor = "transparent"; }} > {section.icon} {section.label} {section.badge && ( {section.badge} )} {!isSearching && (sectionOpen ? ( ) : ( ))} {section.links .filter((l) => !isSearching || matchesSearch(search, l)) .map((link) => ( ))} {section.subSections?.map((sub) => { const matchingLinks = sub.links.filter( (l) => !isSearching || matchesSearch(search, l), ); if (isSearching && matchingLinks.length === 0) return null; return (

{sub.label} {matchingLinks.map((link) => ( ))}

); })}

); })} {isSearching && !groups.some(([, sects]) => sects.some( (s) => s.label.toLowerCase().includes(search.toLowerCase()) || sectionMatchesSearch(search, s), ), ) && ( No results for “{search}” )} } sidebarWidth={300} /> ); }

Sidebar Navigation Laboratory