45 lines
1.9 KiB
TypeScript
45 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
|
|
export default function Header() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
return (
|
|
<header className="p-5 bg-white/30 text-gray-800 fixed w-full z-10 backdrop-blur-md shadow-lg">
|
|
<nav className="flex justify-between items-center max-w-6xl mx-auto">
|
|
<h1 className="text-2xl md:text-3xl font-bold">Dennis Konkol</h1>
|
|
<div className="flex items-center">
|
|
<button
|
|
className="md:hidden p-2 rounded-md bg-white/30 backdrop-blur-md shadow-inner transform transition-transform hover:scale-105 active:shadow-lg active:translate-y-1 neumorphism"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
>
|
|
Menu
|
|
</button>
|
|
<ul
|
|
className={`fixed top-0 right-0 h-full w-64 bg-white p-5 flex flex-col space-y-4 transition-transform duration-300 ${
|
|
isOpen ? "translate-x-0" : "translate-x-full"
|
|
} md:static md:flex-row md:space-y-0 md:space-x-4 md:bg-transparent md:p-0 md:translate-x-0`}
|
|
>
|
|
{["About", "Projects", "Contact"].map((item, index) => (
|
|
<li
|
|
key={item}
|
|
className={`transition-opacity duration-500 delay-${index * 150} ${
|
|
isOpen ? "opacity-100" : "opacity-0"
|
|
} md:opacity-100`}
|
|
>
|
|
<Link
|
|
href={`#${item.toLowerCase()}`}
|
|
className="bg-white/30 p-2 rounded-md backdrop-blur-md shadow-inner transform transition-transform hover:scale-105 active:shadow-lg active:translate-y-1 neumorphism"
|
|
>
|
|
{item}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
);
|
|
} |