Revert "Fix: hydration errors (#45)"

This reverts commit 8c485fb47e.
This commit is contained in:
mr0x50
2025-02-15 20:53:07 +01:00
parent 0d1606bd31
commit a737463115
7 changed files with 56 additions and 84 deletions

View File

@@ -11,46 +11,27 @@ import RegisterButton from "./RegisterButton";
export function TopNavigation() {
const [pubkey, setPubkey] = useState<string | null>(null);
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
setPubkey(window.localStorage.getItem('pubkey'));
if (typeof window !== 'undefined') {
setPubkey(window.localStorage.getItem('pubkey'));
}
}, []);
// Prevent hydration mismatch by not rendering auth-dependent content until mounted
if (!mounted) {
return (
<nav>
<header className="bg-background/80 sticky top-0 z-40 w-full border-b backdrop-blur">
<div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
<TopNavigationItems items={siteConfig.mainNav} />
<div className="flex flex-1 items-center justify-end space-x-4">
<nav className="flex items-center space-x-2">
<DropdownThemeMode />
</nav>
</div>
</div>
</header>
</nav>
);
}
return (
<nav>
<header className="bg-background/80 sticky top-0 z-40 w-full border-b backdrop-blur">
<div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
<TopNavigationItems items={siteConfig.mainNav} />
<div className="flex flex-1 items-center justify-end space-x-4">
<nav className="flex items-center space-x-2">
<DropdownThemeMode />
{pubkey === null ? <RegisterButton /> : null}
{pubkey === null ? <LoginButton /> : null}
{pubkey !== null ? <AvatarDropdown /> : null}
</nav>
</div>
<header className="bg-background/80 sticky top-0 z-40 w-full border-b backdrop-blur">
<div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
<TopNavigationItems items={siteConfig.mainNav} />
<div className="flex flex-1 items-center justify-end space-x-4">
<nav className="flex items-center space-x-2">
<DropdownThemeMode />
{pubkey === null ? <RegisterButton /> : null}
{pubkey === null ? <LoginButton /> : null}
{/* {pubkey !== null ? <Button variant="secondary" onClick={() => { localStorage.removeItem('pubkey'); window.location.reload(); }}>Logout</Button> : null} */}
{pubkey !== null ? <AvatarDropdown /> : null}
</nav>
</div>
</header>
</nav>
</div>
</header>
)
}