import React, { useEffect, useRef, useState } from 'react'; import { NavLink, useLocation } from 'react-router-dom'; import SidebarLinkGroup from './SidebarLinkGroup.tsx'; import { useTranslation } from 'react-i18next'; interface SidebarProps { sidebarOpen: boolean; setSidebarOpen: (arg: boolean) => void; } const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => { const location = useLocation(); const { pathname } = location; const trigger = useRef(null); const sidebar = useRef(null); const storedSidebarExpanded = localStorage.getItem('sidebar-expanded'); const [sidebarExpanded, setSidebarExpanded] = useState( storedSidebarExpanded === null ? false : storedSidebarExpanded === 'true' ); const { t } = useTranslation(); // 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 = ({ keyCode }: KeyboardEvent) => { if (!sidebarOpen || keyCode !== 27) 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;