import { useEffect, useState } from "react"; import { useStore } from "../store"; function useWindowWidth() { const [width, setWidth] = useState(window.innerWidth); useEffect(() => { const handler = () => setWidth(window.innerWidth); window.addEventListener("resize", handler); return () => window.removeEventListener("resize", handler); }, []); return width; } export default function Sidebar() { const { guides, openGuide, activeGuideGid, view, sidebarCollapsed, setSidebarCollapsed } = useStore(); const [search, setSearch] = useState(""); const collapsed = sidebarCollapsed; const windowWidth = useWindowWidth(); const isOverlay = collapsed || windowWidth < 500; const filtered = guides.filter(g => g.name.toLowerCase().includes(search.toLowerCase()) ); return ( ); }