56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import { PawPrint } from 'lucide-react';
|
|
import SideMenu from './SideMenu';
|
|
|
|
export default function Header() {
|
|
const [scrolled, setScrolled] = useState(false);
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => setScrolled(window.scrollY > 8);
|
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (menuOpen) {
|
|
document.body.style.overflow = 'hidden';
|
|
} else {
|
|
document.body.style.overflow = '';
|
|
}
|
|
return () => { document.body.style.overflow = ''; };
|
|
}, [menuOpen]);
|
|
|
|
return (
|
|
<>
|
|
<header className={`header${scrolled ? ' scrolled' : ''}`}>
|
|
{/* Logo */}
|
|
<Link href="/" className="logo" aria-label="PetLink — Início">
|
|
<PawPrint size={22} strokeWidth={2.5} />
|
|
PetLink
|
|
</Link>
|
|
|
|
{/* Hambúrguer animado */}
|
|
<button
|
|
id="menu-toggle"
|
|
className={`menu-btn${menuOpen ? ' open' : ''}`}
|
|
onClick={() => setMenuOpen(v => !v)}
|
|
aria-label={menuOpen ? 'Fechar menu' : 'Abrir menu de navegação'}
|
|
aria-expanded={menuOpen}
|
|
aria-controls="side-menu"
|
|
>
|
|
<span />
|
|
<span />
|
|
<span />
|
|
</button>
|
|
</header>
|
|
|
|
{/* Side Menu — sempre montado, abre/fecha via CSS */}
|
|
<SideMenu open={menuOpen} onClose={() => setMenuOpen(false)} />
|
|
</>
|
|
);
|
|
}
|