import { useEffect, useRef, useState } from "react";
import { Link } from "react-router-dom";
import menuItems from "../data/menu.json";
import Button from "./Button";
import { Menu, MoonIcon, SunIcon, X } from "lucide-react";
export default function NavBar() {
// THEME
const [theme, setTheme] = useState(() => {
if (typeof window === "undefined") return "light";
const stored = localStorage.getItem("theme");
if (stored === "light" || stored === "dark") return stored;
return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
});
useEffect(() => {
if (typeof document === "undefined") return;
const root = document.documentElement;
if (theme === "dark") root.classList.add("dark");
else root.classList.remove("dark");
localStorage.setItem("theme", theme);
}, [theme]);
const toggleTheme = () => setTheme((t) => (t === "dark" ? "light" : "dark"));
// MOBILE MENU
const [mobileOpen, setMobileOpen] = useState(false);
const toggleBtnRef = useRef(null);
const drawerRef = useRef(null);
const openMobile = () => setMobileOpen(true);
const closeMobile = () => setMobileOpen(false);
const toggleMobile = () => setMobileOpen((o) => !o);
// Prevent body scroll when drawer is open
useEffect(() => {
if (typeof document === "undefined") return;
document.body.style.overflow = mobileOpen ? "hidden" : "";
return () => {
document.body.style.overflow = "";
};
}, [mobileOpen]);
// Focus management & Esc to close for dialog
useEffect(() => {
if (!mobileOpen) {
// return focus to toggle button
toggleBtnRef.current?.focus();
return;
}
// move focus into the drawer
drawerRef.current?.focus();
const onKeyDown = (e) => {
if (e.key === "Escape") {
e.preventDefault();
closeMobile();
}
};
document.addEventListener("keydown", onKeyDown);
return () => document.removeEventListener("keydown", onKeyDown);
}, [mobileOpen]);
const menuData = menuItems.data;
return (
<>
{/* Skip link for keyboard users */}
Skip to content
{/* Backdrop (presentational) */}
{/* Mobile Drawer */}
);
}