diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index ee9408f..1f9db7b 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -43,8 +43,7 @@ export default function Navbar() { - {/* Center: Logo Only */}
- {/* eslint-disable-next-line @next/next/no-html-link-for-pages */} - + Logo - +
{/* Right side: profile + theme toggle */} @@ -87,11 +84,15 @@ function NavbarClientExtras({ isAuthenticated, isMounted }: { isAuthenticated: b const [isOpen, setIsOpen] = useState(false); const { unreadCount } = useNotification(); const { theme, setTheme, resolvedTheme } = useTheme(); + + // Start with true to match SSR, then update after mount based on consent const [showThemeToggle, setShowThemeToggle] = useState(true); + const [consentChecked, setConsentChecked] = useState(false); // Determine profile destination safely to avoid hydration mismatch const profileHref = isMounted && isAuthenticated ? "/me" : "/login"; + // Check consent after mount to avoid hydration mismatch useEffect(() => { const checkConsent = () => { const saved = localStorage.getItem("cookie_consent"); @@ -100,13 +101,17 @@ function NavbarClientExtras({ isAuthenticated, isMounted }: { isAuthenticated: b const parsed = JSON.parse(saved); if (parsed.functional === false) { setShowThemeToggle(false); - return; + } else { + setShowThemeToggle(true); } } catch (e) { console.error("Failed to parse cookie consent", e); + setShowThemeToggle(true); } + } else { + setShowThemeToggle(true); } - setShowThemeToggle(true); + setConsentChecked(true); }; checkConsent(); @@ -114,6 +119,9 @@ function NavbarClientExtras({ isAuthenticated, isMounted }: { isAuthenticated: b return () => window.removeEventListener("cookie-consent-updated", checkConsent); }, []); + // Only show toggle if: mounted, consent checked, and consent is granted + const shouldShowToggle = isMounted && consentChecked && showThemeToggle; + useEffect(() => { if (theme && typeof window !== "undefined") { document.cookie = `theme=${theme}; path=/; max-age=31536000`; // 1-year expiry @@ -168,7 +176,7 @@ function NavbarClientExtras({ isAuthenticated, isMounted }: { isAuthenticated: b {/* Theme toggle (Always visible) */} - {showThemeToggle && ( + {shouldShowToggle && (