63 lines
1.7 KiB
TypeScript
63 lines
1.7 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-gray-800 text-white fixed w-full z-10">
|
|
<nav className="flex justify-between items-center max-w-6xl mx-auto">
|
|
<h1 className="text-lg font-bold">My Portfolio</h1>
|
|
<button
|
|
className="md:hidden block focus:outline-none"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
>
|
|
<svg
|
|
className="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
{isOpen ? (
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
) : (
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M4 8h16M4 16h16"
|
|
/>
|
|
)}
|
|
</svg>
|
|
</button>
|
|
<ul className={`flex space-x-4 ${isOpen ? "block" : "hidden"} md:flex`}>
|
|
<li>
|
|
<Link href="#about" className="hover:underline">
|
|
About
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="#projects" className="hover:underline">
|
|
Projects
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="#contact" className="hover:underline">
|
|
Contact
|
|
</Link>
|
|
</li>
|
|
{/* DarkModeToggle removed */}
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
);
|
|
}
|