Chneemann/portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: make header component fully responsive with animated mobile menu

Browse source
This commit is contained in:
Chneemann 2026-07-18 22:40:14 +02:00
parent b68ce1e996
commit c24977920c
1 changed files with 54 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/components/Header.tsx
View file

@ -1,6 +1,11 @@
"use client";
import { useState } from "react";
import Link from "next/link";
export default function Header() {
const [isOpen, setIsOpen] = useState(false);
const navLinks = [
{ label: "About me", href: "#aboutme" },
{ label: "My Skills", href: "#myskills" },
@ -9,16 +14,18 @@ export default function Header() {
];
return (
<header className="fixed top-0 left-0 w-full bg-slate-900 backdrop-blur-md border-b border-slate-800 z-50 px-6 py-4">
<header className="fixed top-0 left-0 w-full bg-slate-900/90 backdrop-blur-md border-b border-slate-800 z-50 px-6 py-4">
<div className="max-w-5xl mx-auto flex justify-between items-center">
<Link
href="/"
className="text-xl font-bold text-white hover:text-blue-400 transition-colors tracking-wider"
className="text-xl font-bold text-white hover:text-blue-400 transition-colors tracking-wider z-50"
onClick={() => setIsOpen(false)}
>
ANDRÉ KEMPF<span className="text-blue-500">.</span>
</Link>
<nav className="flex gap-8 text-base font-medium text-slate-200">
{/* Desktop navigation */}
<nav className="hidden md:flex gap-8 text-base font-medium text-slate-200">
{navLinks.map((link) => (
<Link
key={link.href}
@ -29,6 +36,50 @@ export default function Header() {
</Link>
))}
</nav>
{/* Mobile burger button */}
<button
onClick={() => setIsOpen(!isOpen)}
className="md:hidden flex flex-col justify-center items-center w-8 h-8 space-y-1.5 z-50 focus:outline-none cursor-pointer group"
aria-label="Toggle Menu"
>
{/* Animated burger icon lines */}
<span
className={`block w-6 h-0.5 bg-slate-200 transition-all duration-300 group-hover:bg-blue-400 ${
isOpen ? "rotate-45 translate-y-2" : ""
}`}
/>
<span
className={`block w-6 h-0.5 bg-slate-200 transition-all duration-300 group-hover:bg-blue-400 ${
isOpen ? "opacity-0" : ""
}`}
/>
<span
className={`block w-6 h-0.5 bg-slate-200 transition-all duration-300 group-hover:bg-blue-400 ${
isOpen ? "-rotate-45 -translate-y-2" : ""
}`}
/>
</button>
{/* Mobile fullscreen overlay */}
<div
className={`fixed inset-0 w-full h-screen bg-slate-950/98 flex flex-col items-center justify-center gap-8 text-2xl font-semibold text-slate-200 transition-all duration-300 md:hidden ${
isOpen
? "opacity-100 pointer-events-auto"
: "opacity-0 pointer-events-none"
}`}
>
{navLinks.map((link) => (
<Link
key={link.href}
href={link.href}
onClick={() => setIsOpen(false)}
className="hover:text-blue-400 transition-colors"
>
{link.label}
</Link>
))}
</div>
</div>
</header>
);