68 lines
2.9 KiB
TypeScript
68 lines
2.9 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 gets a Reading-settings affordance pinned to the right ONLY for
|
|
* anonymous visitors — auth users access the same controls from the
|
|
* gear next to Edit Profile in ProfileHeader (and from the desktop
|
|
* sidebar rail). The split avoids two icons doing the same job for
|
|
* signed-in users while keeping the affordance reachable for guests who
|
|
* have no profile.
|
|
*
|
|
* Layout (mobile, anonymous):
|
|
*
|
|
* ┌─────────────────────────────────────────────────────┐
|
|
* │ 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";
|
|
import { NotificationBell } from "@/components/notification-bell";
|
|
import { useAuth } from "@/components/auth/auth-provider";
|
|
|
|
export function SiteHeader() {
|
|
const { user, loading } = useAuth();
|
|
// Only show the mobile gear for anonymous viewers. During the initial
|
|
// auth check we treat `loading` as anonymous so the gear doesn't flash
|
|
// in and out — once auth resolves, it hides for signed-in users.
|
|
const showMobileGear = !loading && !user;
|
|
|
|
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>
|
|
{showMobileGear ? (
|
|
<div className="md:hidden absolute right-2 top-1/2 -translate-y-1/2">
|
|
<ReadingSettings />
|
|
</div>
|
|
) : null}
|
|
{/* Notification bell — signed-in users only (anonymous viewers get
|
|
the reading-settings gear above instead). */}
|
|
{!loading && user ? (
|
|
<div className="absolute right-2 top-1/2 -translate-y-1/2">
|
|
<NotificationBell />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|