| import { useEffect } from "react"; |
| import { NavLink } from "react-router-dom"; |
| import { X } from "lucide-react"; |
| import { NAV_ITEMS } from "./Sidebar.jsx"; |
| import "./MobileMenu.css"; |
|
|
| export default function MobileMenu({ open, onClose }) { |
| useEffect(() => { |
| if (!open) return undefined; |
|
|
| const previousOverflow = document.body.style.overflow; |
| document.body.style.overflow = "hidden"; |
|
|
| const onKeyDown = (event) => { |
| if (event.key === "Escape") onClose(); |
| }; |
| window.addEventListener("keydown", onKeyDown); |
|
|
| return () => { |
| document.body.style.overflow = previousOverflow; |
| window.removeEventListener("keydown", onKeyDown); |
| }; |
| }, [open, onClose]); |
|
|
| if (!open) return null; |
|
|
| return ( |
| <div className="mobile-menu" role="dialog" aria-modal="true" aria-label="Visualization menu"> |
| <button |
| className="mobile-menu__backdrop" |
| onClick={onClose} |
| aria-label="Close visualization menu" |
| /> |
| |
| <section className="mobile-menu__panel"> |
| <header className="mobile-menu__header"> |
| <div> |
| <p className="label">Navigation</p> |
| <h2 className="mobile-menu__title">Visualizations</h2> |
| </div> |
| <button className="ghost mobile-menu__close" onClick={onClose} aria-label="Close menu"> |
| <X size={18} /> |
| </button> |
| </header> |
| |
| <nav className="mobile-menu__nav" aria-label="Visualization links"> |
| {NAV_ITEMS.map(({ to, label, Icon }) => ( |
| <NavLink |
| key={to} |
| to={to} |
| className={({ isActive }) => |
| `mobile-menu__link ${isActive ? "mobile-menu__link--active" : ""}` |
| } |
| onClick={onClose} |
| > |
| <Icon size={18} strokeWidth={1.6} /> |
| <span>{label}</span> |
| </NavLink> |
| ))} |
| </nav> |
| </section> |
| </div> |
| ); |
| } |
|
|
