45 lines
2.4 KiB
Text
45 lines
2.4 KiB
Text
|
"use client";
|
||
|
|
import { useState } from 'react';
|
||
|
|
import Link from 'next/link';
|
||
|
|
|
||
|
|
export default function Header() {
|
||
|
|
const [isOpen, setIsOpen] = useState(false);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<header className="sticky top-0 z-[100] bg-white/95 backdrop-blur-md border-b border-gray-100 shadow-sm">
|
||
|
|
<div className="max-w-[1400px] mx-auto px-6 h-20 flex items-center justify-between">
|
||
|
|
|
||
|
|
{/* LOGO */}
|
||
|
|
<Link href="/" className="h-10 md:h-12 transition-transform hover:scale-105 active:scale-95">
|
||
|
|
<img src="/TeeOff-logo-Retina-1.png" alt="TeeOff.no" className="h-full w-auto object-contain" />
|
||
|
|
</Link>
|
||
|
|
|
||
|
|
{/* DESKTOP NAV */}
|
||
|
|
<nav className="hidden md:flex items-center gap-8 text-[11px] font-black uppercase tracking-widest text-gray-500">
|
||
|
|
<Link href="/" className="hover:text-[#8bc34a]">Hjem</Link>
|
||
|
|
<Link href="/golfbaner" className="hover:text-[#8bc34a]">Finn Bane</Link>
|
||
|
|
<Link href="/medlemskap" className="hover:text-[#8bc34a]">Medlemskap</Link>
|
||
|
|
<Link href="/om-oss" className="hover:text-[#8bc34a]">Om oss</Link>
|
||
|
|
<Link href="/admin/login" className="px-5 py-2 bg-[#ff5722] text-white rounded-xl hover:bg-black transition-all font-black uppercase text-[10px] tracking-widest">Admin</Link>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
{/* HAMBURGER (Mobil) */}
|
||
|
|
<button onClick={() => setIsOpen(!isOpen)} className="md:hidden p-2 text-[#11280f]">
|
||
|
|
<div className="w-6 h-0.5 bg-current mb-1.5 transition-all"></div>
|
||
|
|
<div className="w-6 h-0.5 bg-current mb-1.5"></div>
|
||
|
|
<div className="w-6 h-0.5 bg-current"></div>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* MOBIL MENY OVERLAY */}
|
||
|
|
{isOpen && (
|
||
|
|
<div className="md:hidden absolute top-20 left-0 w-full bg-white border-b border-gray-100 p-6 flex flex-col gap-6 shadow-2xl animate-in slide-in-from-top duration-300">
|
||
|
|
<Link onClick={() => setIsOpen(false)} href="/" className="text-lg font-black uppercase text-[#11280f]">Hjem</Link>
|
||
|
|
<Link onClick={() => setIsOpen(false)} href="/golfbaner" className="text-lg font-black uppercase text-[#11280f]">Finn Bane</Link>
|
||
|
|
<Link onClick={() => setIsOpen(false)} href="/medlemskap" className="text-lg font-black uppercase text-[#11280f]">Medlemskap</Link>
|
||
|
|
<Link onClick={() => setIsOpen(false)} href="/logg-inn" className="text-[#ff5722] font-black uppercase">Admin Logg inn</Link>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</header>
|
||
|
|
);
|
||
|
|
}
|