72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
'use client';
|
|
import { useEffect, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { personal } from '@/content/personal';
|
|
import styles from './Header.module.scss';
|
|
|
|
const navLinks = [
|
|
{ label: 'Home', href: '#home' },
|
|
{ label: 'Tech', href: '#tech' },
|
|
{ label: 'Projects', href: '#projects' },
|
|
{ label: 'About', href: '#about' },
|
|
{ label: 'Experience', href: '#experience' },
|
|
{ label: 'Contact', href: '#contact' },
|
|
];
|
|
|
|
export default function Header() {
|
|
const [scrolled, setScrolled] = useState(false);
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const fn = () => setScrolled(window.scrollY > 80);
|
|
window.addEventListener('scroll', fn);
|
|
return () => window.removeEventListener('scroll', fn);
|
|
}, []);
|
|
|
|
return (
|
|
<header className={`${styles.header} ${scrolled ? styles.scrolled : ''}`}>
|
|
<div className={styles.container}>
|
|
<Link href="#home" className={styles.logo}>
|
|
Ole Sch.
|
|
</Link>
|
|
|
|
{/* Desktop Nav */}
|
|
<nav className={styles.nav} aria-label="Main navigation">
|
|
{navLinks.map(link => (
|
|
<a key={link.label} href={link.href} className={styles.navLink}>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Hamburger */}
|
|
<button
|
|
className={`${styles.hamburger} ${menuOpen ? styles.open : ''}`}
|
|
onClick={() => setMenuOpen(v => !v)}
|
|
aria-label="Toggle menu"
|
|
aria-expanded={menuOpen}
|
|
>
|
|
<span /><span /><span />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{menuOpen && (
|
|
<nav className={styles.mobileMenu} aria-label="Mobile navigation">
|
|
{navLinks.map((link, i) => (
|
|
<a
|
|
key={link.label}
|
|
href={link.href}
|
|
className={styles.mobileLink}
|
|
onClick={() => setMenuOpen(false)}
|
|
style={{ animationDelay: `${i * 0.05}s` }}
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|