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
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:
@@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user