feat(landing): add guest-facing Dark Mode toggle to the navbar
Visitors without an account had no way to switch themes — the toggle so far only existed in the authenticated Sidebar/MobileNav. This variant skips the account-bound persistence (no Owner row for guests) and just flips next-themes' own localStorage-backed state.
This commit is contained in:
1 parent
d21f4708dc
commit
2b52345c66
2 files changed
+33
No files matched your search
@@ -6,6 +6,7 @@ import Image from "next/image";
|
||||
import { PawPrint, HeartPulse, MessageCircle, Images, Heart, Sparkles, CheckCircle2 } from "lucide-react";
|
||||
import { LanguageSwitcher } from "@/components/i18n/LanguageSwitcher";
|
||||
import { ScrollReveal } from "@/components/landing/ScrollReveal";
|
||||
import { ThemeToggleButton } from "@/components/landing/ThemeToggleButton";
|
||||
|
||||
/**
|
||||
* Root route (/) — public landing page for logged-out visitors, redirects
|
||||
@@ -72,6 +73,7 @@ export default async function RootPage() {
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<ThemeToggleButton />
|
||||
<LanguageSwitcher />
|
||||
<Link
|
||||
href="/log-in"
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
"use client";
|
||||
|
||||
import { Moon, Sun } from "lucide-react";
|
||||
import { useTheme } from "next-themes";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
// Guest-facing variant for the public landing page — no Owner account exists
|
||||
// yet, so this only flips next-themes' own localStorage-backed state (same
|
||||
// mechanism the authenticated Sidebar toggle uses for same-browser persistence,
|
||||
// just without the account-bound write that useThemeToggle performs).
|
||||
export function ThemeToggleButton() {
|
||||
const { resolvedTheme, setTheme } = useTheme();
|
||||
const t = useTranslations("Theme");
|
||||
const isDark = resolvedTheme === "dark";
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setTheme(isDark ? "light" : "dark")}
|
||||
aria-label={t("toggleLabel")}
|
||||
title={t("toggleLabel")}
|
||||
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
||||
>
|
||||
{isDark ? (
|
||||
<Sun className="h-4 w-4" aria-hidden="true" />
|
||||
) : (
|
||||
<Moon className="h-4 w-4" aria-hidden="true" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user