'use client'; import { useEffect, useRef, useState } from 'react'; import { AnimatePresence, motion } from 'framer-motion'; import { cn } from '@/lib/utils'; type NavItem = { id: string; label: string; href: string; }; type FooterLink = { id: string; label: string; href: string; highlight?: boolean; }; const MENU_BUTTON_LABEL = 'Open menu'; const CLOSE_BUTTON_LABEL = 'Close menu'; const DIALOG_LABEL = 'Main menu'; const navItems: NavItem[] = [ { id: 'technology', label: 'Technology', href: '#technology' }, { id: 'company', label: 'Company', href: '#company' }, { id: 'writing', label: 'Writing', href: '#writing' }, { id: 'jobs', label: 'Jobs', href: '#jobs' }, ]; const footerLinks: FooterLink[] = [ { id: 'note', label: 'A nice note', href: '#note' }, { id: 'launch', label: 'Launching June 2026', href: '#launch' }, { id: 'beta', label: 'Apply for Beta', href: '#beta', highlight: true }, ]; // Blue clover/cross icon const CloverIcon = () => ( ); // 3x3 dot grid menu button const DotGridIcon = () => ( ); // Play icon for Watch button const PlayIcon = () => ( ); export default function ModalMenu01() { const [isOpen, setIsOpen] = useState(false); const firstNavRef = useRef(null); const handleOpen = () => { setIsOpen(true); }; const handleClose = () => { setIsOpen(false); }; const handleMenuButtonKeyDown = (event: React.KeyboardEvent) => { if (event.key !== 'Enter' && event.key !== ' ') return; event.preventDefault(); handleOpen(); }; const handleDialogKeyDown = (event: React.KeyboardEvent) => { if (event.key !== 'Escape') return; event.preventDefault(); handleClose(); }; // Global keyboard shortcut useEffect(() => { const handleGlobalKeyDown = (event: KeyboardEvent) => { if (!event.metaKey && !event.ctrlKey) return; if (event.key.toLowerCase() !== 'm') return; event.preventDefault(); setIsOpen((prev) => !prev); }; window.addEventListener('keydown', handleGlobalKeyDown); return () => window.removeEventListener('keydown', handleGlobalKeyDown); }, []); // Focus first nav item when modal opens useEffect(() => { if (!isOpen) return; const focusTimer = window.setTimeout(() => { firstNavRef.current?.focus(); }, 100); return () => window.clearTimeout(focusTimer); }, [isOpen]); // Lock body scroll when modal is open useEffect(() => { if (!isOpen) return; const { body } = document; const previousOverflow = body.style.overflow; body.style.overflow = 'hidden'; return () => { body.style.overflow = previousOverflow; }; }, [isOpen]); return (

{/* Menu Button - Centered */} {isOpen && ( <> {/* Backdrop */} {/* Modal */}

)}

); }

Modal Menu

Tech

Category