highperfocused/lumina
1
0
Fork 0
mirror of https://github.com/lumina-rocks/lumina.git synced 2026-06-03 17:23:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix: hydration errors (#45)

Browse Source 
* fix hydration errors in bottom bar and in Top Navigation

* Refactor: Update DrawerTrigger to use 'asChild' prop in multiple components
This commit is contained in:
mroxso
2025-02-12 16:16:03 +01:00
committed by GitHub
parent ee5ead8139
commit 8c485fb47e
7 changed files with 84 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
components/headerComponents/TopNavigation.tsx
View File

@@ -11,27 +11,46 @@ import RegisterButton from "./RegisterButton";
export function TopNavigation() {
const [pubkey, setPubkey] = useState<string | null>(null);
const [mounted, setMounted] = useState(false);
useEffect(() => {
if (typeof window !== 'undefined') {
setPubkey(window.localStorage.getItem('pubkey'));
}
setMounted(true);
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 (
<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>
<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>
</div>
</div>
</header>
</header>
</nav>
)
}