import React, { useState, useEffect, useRef } from 'react'; import { NavLink, useLocation } from 'react-router-dom'; import Logo from '../images/logo.png'; import SidebarLinkGroup from './SidebarLinkGroup'; function Sidebar({ sidebarOpen, setSidebarOpen }) { 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'); // close on click outside useEffect(() => { const clickHandler = ({ target }) => { 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 }) => { if (!sidebarOpen || keyCode !== 27) return; setSidebarOpen(false); }; document.addEventListener('keydown', keyHandler); return () => document.removeEventListener('keydown', keyHandler); }); useEffect(() => { localStorage.setItem('sidebar-expanded', sidebarExpanded); if (sidebarExpanded) { document.querySelector('body').classList.add('sidebar-expanded'); } else { document.querySelector('body').classList.remove('sidebar-expanded'); } }, [sidebarExpanded]); function saveDigitalId () { localStorage.setItem('digitalId', '7234ABC3423423523457234ABC34234') } return (
{/* Sidebar backdrop (mobile only) */} {/* Sidebar */}
); } export default Sidebar;