import React, { useEffect, useRef, useState } from "react"; import { NavLink, useLocation } from "react-router-dom"; import SidebarLinkGroup from "./SidebarLinkGroup.tsx"; import { useTranslation } from "react-i18next"; import { HamburgerGoBackIcon } from "../icons/SidebarIcons.tsx"; import { ArrowIcon } from "../icons/ArrowIcon.tsx"; import { FaHome, FaClipboardList } from "react-icons/fa"; import { FaChartSimple, FaTrain, FaBuildingFlag } from "react-icons/fa6"; interface SidebarProps { sidebarOpen: boolean; setSidebarOpen: (arg: boolean) => void; } export 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 ( ); };