-
jf
+ function HamburgerMenu({ onProjectsToggle, projectsVisible, onAboutToggle, aboutVisible }) {
+ const [open, setOpen] = React.useState(false);
+
+ // Close menu on outside click
+ React.useEffect(() => {
+ function handleClick(e) {
+ if (!e.target.closest('.hamburger') && !e.target.closest('.menu-dropdown')) {
+ setOpen(false);
+ }
+ }
+ if (open) document.addEventListener('mousedown', handleClick);
+ return () => document.removeEventListener('mousedown', handleClick);
+ }, [open]);
+
+ return (
+
+
setOpen(o => !o)} aria-label="Open menu" tabIndex={0}>
+
+
-
-
+ );
+ }
+
+ function HamburgerMenuApp({ projectsVisible, aboutVisible, onProjectsToggle, onAboutToggle }) {
+ return (
+
+ );
+ }
+
+ function MainContentApp({ projectsVisible, aboutVisible }) {
+ return (
+ <>
+
+
+
+ );
+ }
+
+ function RootApp() {
+ const [projectsVisible, setProjectsVisible] = React.useState(false);
+ const [aboutVisible, setAboutVisible] = React.useState(false);
+
+ // Render hamburger menu in menu-root
+ React.useEffect(() => {
+ ReactDOM.createRoot(document.getElementById('menu-root')).render(
+
setProjectsVisible(v => !v)}
+ onAboutToggle={() => setAboutVisible(v => !v)}
+ />
+ );
+ }, [projectsVisible, aboutVisible]);
+
+ return (
+
+ );
+ }
+
+ // Render main content (About, Projects) in root
+ ReactDOM.createRoot(document.getElementById('root')).render();
+
+
-