71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { Menu, X } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
|
|
const navItems = [
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Stack", href: "#stack" },
|
|
{ label: "Philosophy", href: "#philosophy" },
|
|
{ label: "Projects", href: "#projects" },
|
|
{ label: "Contact", href: "#contact" },
|
|
]
|
|
|
|
export function Header() {
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-border">
|
|
<div className="max-w-4xl mx-auto px-6 py-4">
|
|
<nav className="flex items-center justify-between">
|
|
<Link
|
|
href="/"
|
|
className="font-mono text-lg font-semibold text-foreground hover:text-primary transition-colors"
|
|
>
|
|
atticl
|
|
</Link>
|
|
|
|
{/* Desktop Nav */}
|
|
<ul className="hidden md:flex items-center gap-8">
|
|
{navItems.map((item) => (
|
|
<li key={item.href}>
|
|
<Link
|
|
href={item.href}
|
|
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* Mobile Nav */}
|
|
<button
|
|
className="md:hidden text-muted-foreground hover:text-foreground"
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
|
|
>
|
|
{mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
|
|
</button>
|
|
</nav>
|
|
|
|
{/* Mobile Nav */}
|
|
{mobileMenuOpen && (
|
|
<ul className="md:hidden mt-4 pb-4 flex flex-col gap4">
|
|
{navItems.map((item) => (
|
|
<li key={item.href}>
|
|
<Link
|
|
href={item.href}
|
|
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
</header>
|
|
)
|
|
} |