103 lines
2.5 KiB
TypeScript
103 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
|
|
import Logo from '@/public/borb.png';
|
|
import { nav, site } from '@/lib/site';
|
|
|
|
const Header = () => {
|
|
const [open, setOpen] = useState(false);
|
|
const close = () => setOpen(false);
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 border-b border-white/10 bg-obsidian/45 backdrop-blur-md">
|
|
<div className="container-page flex h-16 items-center justify-between">
|
|
<Link
|
|
href="/"
|
|
onClick={close}
|
|
className="flex items-center gap-2.5 text-sm font-medium tracking-tight text-ink"
|
|
aria-label="Home"
|
|
>
|
|
<Image
|
|
src={Logo}
|
|
alt=""
|
|
width={40}
|
|
height={40}
|
|
loading="eager"
|
|
className="h-9 w-9 object-contain"
|
|
/>
|
|
<span>{site.name}</span>
|
|
</Link>
|
|
|
|
<nav
|
|
aria-label="Primary"
|
|
className="hidden items-center gap-7 text-sm md:flex"
|
|
>
|
|
{nav.map((item) => (
|
|
<a
|
|
key={item.href}
|
|
href={item.href}
|
|
className="text-ink/75 transition-colors hover:text-ink"
|
|
>
|
|
{item.label}
|
|
</a>
|
|
))}
|
|
<a
|
|
href={site.gitlab}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="border-l border-white/15 pl-6 text-aurora transition-colors hover:text-crest"
|
|
>
|
|
GitLab ↗
|
|
</a>
|
|
</nav>
|
|
|
|
<button
|
|
type="button"
|
|
className="grid h-9 w-9 place-items-center border border-white/15 text-ink hover:border-aurora md:hidden"
|
|
aria-expanded={open}
|
|
aria-controls="mobile-nav"
|
|
aria-label={open ? 'Close menu' : 'Open menu'}
|
|
onClick={() => setOpen((v) => !v)}
|
|
>
|
|
{open ? (
|
|
<XMarkIcon className="h-4 w-4" aria-hidden />
|
|
) : (
|
|
<Bars3Icon className="h-4 w-4" aria-hidden />
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{open && (
|
|
<nav
|
|
id="mobile-nav"
|
|
aria-label="Mobile"
|
|
className="flex flex-col border-t border-white/10 bg-obsidian/90 backdrop-blur-md md:hidden"
|
|
>
|
|
{nav.map((item) => (
|
|
<a
|
|
key={item.href}
|
|
href={item.href}
|
|
onClick={close}
|
|
className="border-b border-white/10 px-6 py-3.5 text-sm text-ink/80 hover:bg-white/5 hover:text-ink"
|
|
>
|
|
{item.label}
|
|
</a>
|
|
))}
|
|
<a
|
|
href={site.gitlab}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="px-6 py-3.5 text-sm text-aurora hover:bg-white/5"
|
|
>
|
|
GitLab ↗
|
|
</a>
|
|
</nav>
|
|
)}
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|