48 lines
2.0 KiB
TypeScript
48 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* SiteHeader — minimal sticky transparent header with the brand wordmark
|
|
* centred. Navigation lives in SiteSidebar (desktop) and SiteBottomNav
|
|
* (mobile), so the header's only job here is to anchor the brand.
|
|
*
|
|
* Mobile also gets a Reading-settings affordance pinned to the right —
|
|
* the sidebar rail is hidden on mobile, so this is the only easy entry
|
|
* point to the theme + palette + font controls.
|
|
*
|
|
* Layout (mobile):
|
|
*
|
|
* ┌─────────────────────────────────────────────────────┐
|
|
* │ Prabhupāda ⚙ │
|
|
* │ SAYS │
|
|
* └─────────────────────────────────────────────────────┘
|
|
*
|
|
* On md+ the gear hides and the sidebar carries it instead.
|
|
*/
|
|
|
|
import Link from "next/link";
|
|
import { ReadingSettings } from "@/components/reading-settings";
|
|
|
|
export function SiteHeader() {
|
|
return (
|
|
<header className="sticky top-0 z-30 bg-background/60 backdrop-blur-md">
|
|
<div className="relative h-12 sm:h-14 flex items-center justify-center px-4">
|
|
<Link
|
|
href="/"
|
|
aria-label="Prabhupāda Says — home"
|
|
className="leading-none text-foreground font-[family-name:var(--font-title)] transition-opacity hover:opacity-80"
|
|
>
|
|
<span className="block text-center text-[0.8rem] sm:text-base font-semibold uppercase tracking-[0.12em]">
|
|
Prabhupāda
|
|
</span>
|
|
<span className="block text-center text-[0.55rem] sm:text-[0.7rem] font-medium uppercase text-muted-foreground tracking-[0.22em] mt-0.5">
|
|
Says
|
|
</span>
|
|
</Link>
|
|
<div className="md:hidden absolute right-2 top-1/2 -translate-y-1/2">
|
|
<ReadingSettings />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|