forked from UKSOURCE/ipv6
Fix size of website
This commit is contained in:
@@ -28,94 +28,131 @@ export default function HeaderClient({
|
||||
}, [mobileOpen]);
|
||||
|
||||
return (
|
||||
<header className="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-xl border-b border-white/5">
|
||||
<div className="flex justify-between items-center px-[var(--spacing-gutter)] py-2 lg:py-3 w-full max-w-hd mx-auto">
|
||||
<Link
|
||||
href="/"
|
||||
className="font-[var(--font-display-lg)] text-[18px] sm:text-[20px] lg:text-[24px] text-primary tracking-tighter uppercase font-bold"
|
||||
>
|
||||
{brand.name}
|
||||
</Link>
|
||||
|
||||
<nav className="hidden xl:flex items-center gap-10 2xl:gap-16">
|
||||
<>
|
||||
<header className="fixed top-0 w-full z-50 bg-surface/90 backdrop-blur-xl border-b border-white/10 shadow-2xl">
|
||||
<div className="flex justify-between items-center px-[var(--spacing-gutter)] py-4 lg:py-6 w-full max-w-hd mx-auto">
|
||||
<Link
|
||||
className={`font-[var(--font-label-caps)] text-sm ${
|
||||
isHome ? "text-primary border-b-2 border-primary pb-1" : "text-on-surface-variant hover:text-primary"
|
||||
} transition-colors duration-300`}
|
||||
href="/"
|
||||
className="font-[var(--font-display-lg)] text-[16px] sm:text-[18px] lg:text-[22px] text-primary tracking-tighter uppercase font-bold"
|
||||
>
|
||||
Home
|
||||
{brand.name}
|
||||
</Link>
|
||||
{navItems.map((item) => {
|
||||
const active = pathname === item.href;
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
className={`font-[var(--font-label-caps)] text-sm transition-colors duration-300 ${
|
||||
active ? "text-primary border-b-2 border-primary pb-1" : "text-on-surface-variant hover:text-primary"
|
||||
}`}
|
||||
href={item.href}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-4 lg:gap-10">
|
||||
<span className="hidden sm:block text-on-surface-variant/60 font-[var(--font-label-caps)] text-xs">
|
||||
EN
|
||||
</span>
|
||||
<Link
|
||||
href="/registration"
|
||||
className="hidden sm:inline-flex gold-gradient-bg text-on-primary px-5 lg:px-7 py-2 lg:py-2.5 font-[var(--font-body-base)] text-sm font-bold uppercase tracking-wider rounded-lg active:scale-95 transition-transform shadow-lg shadow-primary/10"
|
||||
>
|
||||
Register
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className="xl:hidden text-primary p-2"
|
||||
aria-label="Toggle menu"
|
||||
aria-expanded={mobileOpen}
|
||||
onClick={() => setMobileOpen((v) => !v)}
|
||||
>
|
||||
<span className="material-symbols-outlined text-3xl">{mobileOpen ? "close" : "menu"}</span>
|
||||
</button>
|
||||
<nav className="hidden lg:flex items-center gap-8 2xl:gap-12">
|
||||
<Link
|
||||
className={`font-[var(--font-label-caps)] text-sm ${
|
||||
isHome ? "text-primary border-b-2 border-primary pb-1" : "text-on-surface-variant hover:text-primary"
|
||||
} transition-colors duration-300`}
|
||||
href="/"
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
{navItems.map((item) => {
|
||||
const active = pathname === item.href;
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
className={`font-[var(--font-label-caps)] text-sm transition-colors duration-300 ${
|
||||
active ? "text-primary border-b-2 border-primary pb-1" : "text-on-surface-variant hover:text-primary"
|
||||
}`}
|
||||
href={item.href}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-4 lg:gap-10">
|
||||
<span className="hidden sm:block text-on-surface-variant/60 font-[var(--font-label-caps)] text-xs">
|
||||
EN
|
||||
</span>
|
||||
<Link
|
||||
href="/registration"
|
||||
className="hidden sm:inline-flex gold-gradient-bg text-on-primary px-4 lg:px-6 py-2 lg:py-2.5 font-[var(--font-body-base)] text-xs lg:text-sm font-bold uppercase tracking-wider rounded-lg active:scale-95 transition-transform shadow-lg shadow-primary/10"
|
||||
>
|
||||
Register
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className="lg:hidden text-primary p-2"
|
||||
aria-label="Toggle menu"
|
||||
aria-expanded={mobileOpen}
|
||||
onClick={() => setMobileOpen((v) => !v)}
|
||||
>
|
||||
<span className="material-symbols-outlined text-3xl">{mobileOpen ? "close" : "menu"}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Mobile Menu Overlay */}
|
||||
<div
|
||||
className={`fixed inset-0 top-[52px] lg:top-[60px] bg-surface z-40 flex-col p-[var(--spacing-gutter)] gap-8 xl:hidden border-t border-white/5 ${
|
||||
mobileOpen ? "flex" : "hidden"
|
||||
className={`fixed inset-0 bg-black/80 backdrop-blur-md z-[60] transition-opacity duration-500 lg:hidden ${
|
||||
mobileOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
|
||||
}`}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
/>
|
||||
|
||||
{/* Mobile Menu Side Drawer */}
|
||||
<div
|
||||
className={`fixed inset-y-0 right-0 w-[80%] sm:w-[380px] z-[70] flex flex-col bg-[#1a1a1a] shadow-[-20px_0_60px_rgba(0,0,0,1)] transition-transform duration-500 ease-out lg:hidden ${
|
||||
mobileOpen ? "translate-x-0" : "translate-x-full"
|
||||
}`}
|
||||
>
|
||||
<Link className="text-2xl font-[var(--font-display-lg)] text-on-surface" href="/" onClick={() => setMobileOpen(false)}>
|
||||
Home
|
||||
</Link>
|
||||
{navItems.map((item) => {
|
||||
const active = pathname === item.href;
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
className={`text-2xl font-[var(--font-display-lg)] ${active ? "text-primary" : "text-on-surface"}`}
|
||||
href={item.href}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
<div className="mt-auto flex flex-col gap-6">
|
||||
<div className="text-on-surface-variant/60 font-[var(--font-label-caps)] text-sm">Language: EN</div>
|
||||
<Link
|
||||
href="/registration"
|
||||
className="gold-gradient-bg text-on-primary w-full py-5 font-[var(--font-body-base)] text-lg font-bold uppercase tracking-wider rounded-lg text-center"
|
||||
<div className="p-8 flex justify-between items-center border-b border-white/5 bg-[#222222]">
|
||||
<span className="font-[var(--font-display-lg)] text-primary text-sm font-bold uppercase tracking-widest">
|
||||
Menu
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="text-primary/70 hover:text-primary transition-colors"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
Register Now
|
||||
</Link>
|
||||
<span className="material-symbols-outlined text-4xl">close</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col p-8 gap-8 overflow-y-auto">
|
||||
<nav className="flex flex-col gap-6">
|
||||
<Link
|
||||
className={`text-xl font-[var(--font-display-lg)] ${isHome ? "text-primary" : "text-on-surface"} hover:text-primary transition-colors`}
|
||||
href="/"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
{navItems.map((item) => {
|
||||
const active = pathname === item.href;
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
className={`text-xl font-[var(--font-display-lg)] transition-colors ${
|
||||
active ? "text-primary" : "text-on-surface hover:text-primary"
|
||||
}`}
|
||||
href={item.href}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="mt-auto pt-10 border-t border-white/5 flex flex-col gap-6">
|
||||
<div className="text-on-surface-variant/60 font-[var(--font-label-caps)] text-sm uppercase tracking-widest">
|
||||
Language: EN
|
||||
</div>
|
||||
<Link
|
||||
href="/registration"
|
||||
className="gold-gradient-bg text-on-primary w-full py-5 font-[var(--font-body-base)] text-lg font-bold uppercase tracking-widest rounded-xl text-center shadow-2xl"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
Register Now
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user