feat(web): add light/dark theme toggle to public nav
Some checks failed
CI / Lint → Typecheck → Test → Build (22) (push) Failing after 5s
CI / E2E Tests (push) Has been skipped
CodeQL Analysis / CodeQL (javascript-typescript) (push) Failing after 1m9s
Deploy / Build API Image (push) Failing after 19s
Deploy / Build Web Image (push) Failing after 12s
Deploy / Build AI Services Image (push) Failing after 11s
Deploy / Deploy to Staging (push) Has been cancelled
Deploy / Smoke Test Staging (push) Has been cancelled
Deploy / Rollback Staging (push) Has been cancelled
Deploy / Smoke Test Production (push) Has been cancelled
Deploy / Rollback Production (push) Has been cancelled
Deploy / Deploy to Production (push) Has been cancelled
Security Scanning / Trivy Scan — Web Image (push) Failing after 30s
Security Scanning / Trivy Filesystem Scan (push) Failing after 34s
E2E Tests / Playwright E2E (push) Failing after 10s
Security Scanning / Dependency Audit (pnpm) (push) Failing after 3s
Security Scanning / Trivy Scan — API Image (push) Failing after 40s
Security Scanning / Trivy Scan — AI Services Image (push) Has been cancelled
Security Scanning / Security Gate (push) Failing after 0s

Public layout only had the language switcher next to the auth block —
users reading the public site had no way to toggle theme, while the
dashboard layout has always had one. Mirror the dashboard's toggle:
Moon icon when the app is in light mode, Sun icon when in dark mode,
aria-label pulled from the `dashboard.darkMode`/`lightMode` strings
that are already translated.

Sits between LanguageSwitcher and the user/auth block so it's visible
on both desktop and mobile headers without adding to the hamburger
menu.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ho Ngoc Hai
2026-04-19 14:15:10 +07:00
parent 0fc6516880
commit 185658bf5b

View File

@@ -1,11 +1,12 @@
'use client';
import { LogOut, Menu, User as UserIcon, X } from 'lucide-react';
import { LogOut, Menu, Moon, Sun, User as UserIcon, X } from 'lucide-react';
import { usePathname } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { useState } from 'react';
import { CompareFloatingBar } from '@/components/comparison/compare-floating-bar';
import { NotificationBell } from '@/components/notifications/notification-bell';
import { useTheme } from '@/components/providers/theme-provider';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { LanguageSwitcher } from '@/components/ui/language-switcher';
@@ -33,6 +34,7 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
const pathname = usePathname();
const router = useRouter();
const { user, logout } = useAuthStore();
const { theme, toggleTheme } = useTheme();
const t = useTranslations();
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -109,6 +111,19 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
<div className="ml-auto flex min-w-0 items-center gap-1 sm:gap-2">
<LanguageSwitcher />
<Button
variant="ghost"
size="sm"
onClick={toggleTheme}
aria-label={theme === 'light' ? t('dashboard.darkMode') : t('dashboard.lightMode')}
className="h-9 w-9 shrink-0 p-0"
>
{theme === 'light' ? (
<Moon className="h-4 w-4" aria-hidden="true" />
) : (
<Sun className="h-4 w-4" aria-hidden="true" />
)}
</Button>
{user ? (
<>
{/* Bell only on sm+ to avoid overcrowding mobile header */}