56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { CATEGORIES, slugifyCategory } from "./categories";
|
|
|
|
const categoryIcons: Record<string, string> = {
|
|
Interior: "/categories/cat-interior.png",
|
|
Tools: "/categories/cat-tools.png",
|
|
Exterior: "/categories/cat-exterior.png",
|
|
Drivetrain: "/categories/cat-drivetrain.png",
|
|
Lighting: "/categories/cat-lighting.png",
|
|
Suspension: "/categories/cat-suspension.png",
|
|
Audio: "/categories/cat-audio.png",
|
|
Performance: "/categories/cat-performance.png",
|
|
};
|
|
|
|
export default function MobileHeaderShrunk() {
|
|
return (
|
|
<header className="so-header so-header--mobile so-header--shrunk">
|
|
<div className="container so-header__mobile">
|
|
<div className="so-header__top">
|
|
{/* Logo intentionally omitted for the shrunk header */}
|
|
</div>
|
|
|
|
<div className="so-header__categories">
|
|
<nav className="so-header__nav so-header__nav--mobile">
|
|
{CATEGORIES.map((c) => (
|
|
<Link
|
|
key={c}
|
|
href={`/category/${slugifyCategory(c)}`}
|
|
className="so-navitem"
|
|
style={{
|
|
backgroundImage: `url(${categoryIcons[c] || ""})`,
|
|
}}
|
|
>
|
|
<span className="so-navitem__label">{c}</span>
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
<div className="so-header__mobile-tools">
|
|
<input
|
|
className="so-header__search"
|
|
type="search"
|
|
placeholder="Search"
|
|
aria-label="Search"
|
|
/>
|
|
<Link href="/login" className="so-auth-icon" aria-label="Sign in">
|
|
<span className="so-auth-icon__glyph" aria-hidden="true" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|