diff --git a/app/globals.css b/app/globals.css index 37d7faa..6c0de70 100644 --- a/app/globals.css +++ b/app/globals.css @@ -114,6 +114,11 @@ body { position: relative; background-image: linear-gradient(180deg, var(--page-shadow), transparent 28%); -webkit-font-smoothing: antialiased; + letter-spacing: 0.012em; +} + +h1, h2, h3, h4, h5, h6 { + letter-spacing: 0.005em; } body::before, diff --git a/components/layout/Navbar.tsx b/components/layout/Navbar.tsx index 5571563..b76edb6 100644 --- a/components/layout/Navbar.tsx +++ b/components/layout/Navbar.tsx @@ -2,13 +2,40 @@ import Link from 'next/link'; import { usePathname } from 'next/navigation'; +import { useEffect, useRef, useState } from 'react'; import { ThemeToggle } from './ThemeToggle'; export function Navbar() { const pathname = usePathname(); + const [menuOpen, setMenuOpen] = useState(false); + const menuRef = useRef(null); const isActive = (path: string) => pathname?.startsWith(path); + useEffect(() => { + setMenuOpen(false); + }, [pathname]); + + useEffect(() => { + if (!menuOpen) return; + + const handlePointer = (event: MouseEvent) => { + if (menuRef.current && !menuRef.current.contains(event.target as Node)) { + setMenuOpen(false); + } + }; + const handleKey = (event: KeyboardEvent) => { + if (event.key === 'Escape') setMenuOpen(false); + }; + + document.addEventListener('mousedown', handlePointer); + document.addEventListener('keydown', handleKey); + return () => { + document.removeEventListener('mousedown', handlePointer); + document.removeEventListener('keydown', handleKey); + }; + }, [menuOpen]); + return (