import React, { useEffect, useRef, useState } from "react"; import Link from "next/link"; import { usePathname } from "next/navigation"; import SidebarLinkGroup from "./SidebarLinkGroup"; import Image from "next/image"; interface SidebarProps { sidebarOpen: boolean; setSidebarOpen: (arg: boolean) => void; } const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => { const pathname = usePathname(); const trigger = useRef(null); const sidebar = useRef(null); let storedSidebarExpanded = "true"; const [sidebarExpanded, setSidebarExpanded] = useState( storedSidebarExpanded === null ? false : storedSidebarExpanded === "true" ); // close on click outside useEffect(() => { const clickHandler = ({ target }: MouseEvent) => { if (!sidebar.current || !trigger.current) return; if ( !sidebarOpen || sidebar.current.contains(target) || trigger.current.contains(target) ) return; setSidebarOpen(false); }; document.addEventListener("click", clickHandler); return () => document.removeEventListener("click", clickHandler); }); // close if the esc key is pressed useEffect(() => { const keyHandler = ({ key }: KeyboardEvent) => { if (!sidebarOpen || key !== "Escape") return; setSidebarOpen(false); }; document.addEventListener("keydown", keyHandler); return () => document.removeEventListener("keydown", keyHandler); }); useEffect(() => { localStorage.setItem("sidebar-expanded", sidebarExpanded.toString()); if (sidebarExpanded) { document.querySelector("body")?.classList.add("sidebar-expanded"); } else { document.querySelector("body")?.classList.remove("sidebar-expanded"); } }, [sidebarExpanded]); return ( ); }; export default Sidebar;