47 lines
2.5 KiB
TypeScript
47 lines
2.5 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
|
|
export default function Nav() {
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<nav className="fixed top-0 left-0 right-0 z-50 bg-gray-950/90 backdrop-blur-sm border-b border-gray-800">
|
|
<div className="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
|
|
<Link href="/" className="text-xl font-bold text-white text-glow">
|
|
SZMYT AI Labs
|
|
</Link>
|
|
|
|
<div className="hidden md:flex gap-8">
|
|
<Link href="/" className="text-gray-300 hover:text-cyan-400 transition-colors">Strona główna</Link>
|
|
<Link href="/oferta" className="text-gray-300 hover:text-cyan-400 transition-colors">Oferta</Link>
|
|
<Link href="/blog" className="text-gray-300 hover:text-cyan-400 transition-colors">Blog</Link>
|
|
<Link href="/about" className="text-gray-300 hover:text-cyan-400 transition-colors">O nas</Link>
|
|
<Link href="/#kontakt" className="text-gray-300 hover:text-cyan-400 transition-colors">Kontakt</Link>
|
|
</div>
|
|
|
|
<button
|
|
className="md:hidden text-gray-300"
|
|
onClick={() => setMenuOpen(!menuOpen)}
|
|
aria-label={menuOpen ? "Zamknij menu" : "Otwórz menu"}
|
|
aria-expanded={menuOpen}
|
|
>
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={menuOpen ? "M6 18L18 6M6 6l12 12" : "M3 6h18M3 12h18M3 18h18"} />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{menuOpen && (
|
|
<div className="md:hidden bg-gray-950 border-t border-gray-800 px-4 py-4 flex flex-col gap-4">
|
|
<Link href="/" onClick={() => setMenuOpen(false)} className="text-gray-300 hover:text-cyan-400 transition-colors">Strona główna</Link>
|
|
<Link href="/oferta" onClick={() => setMenuOpen(false)} className="text-gray-300 hover:text-cyan-400 transition-colors">Oferta</Link>
|
|
<Link href="/blog" onClick={() => setMenuOpen(false)} className="text-gray-300 hover:text-cyan-400 transition-colors">Blog</Link>
|
|
<Link href="/about" onClick={() => setMenuOpen(false)} className="text-gray-300 hover:text-cyan-400 transition-colors">O nas</Link>
|
|
<Link href="/#kontakt" onClick={() => setMenuOpen(false)} className="text-gray-300 hover:text-cyan-400 transition-colors">Kontakt</Link>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
);
|
|
}
|