Defer hydration, use NavContents directly

Author: Hans5958

src/components/navigation/MobileNavbar.tsx

@@ -1,9 +1,9 @@
 import { HamburgerMenuIcon } from "@radix-ui/react-icons";
 import { ScrollArea } from "../ui/scroll-area";
 import { Sheet, SheetContent, SheetTrigger } from "../ui/sheet";
-import { NavContents, type NavContentsProps } from "./NavContents.tsx";
+import React from "react";
 
-export default function MobileNavbar(props: NavContentsProps) {
+export default function MobileNavbar({ children }: { children: React.ReactNode }) {
   return (
     <Sheet>
       <SheetTrigger
@@ -15,7 +15,7 @@ export default function MobileNavbar(props: NavContentsProps) {
       <SheetContent side="left" className="p-0">
         <ScrollArea className="h-full">
           <div className="p-6">
-            <NavContents {...props} />
+            { children }
           </div>
         </ScrollArea>
       </SheetContent>

src/components/navigation/Navbar.astro

@@ -10,8 +10,8 @@ import { groupedNavbarParents, navbarParents, pages } from "./navigationConfig";
       groupedNavbarParents={groupedNavbarParents}
       navbarParents={navbarParents}
       pages={pages}
-      client:visible
       mobile={false}
+      client:visible
     />
   </div>
 </ScrollArea>

src/components/navigation/Navigation.astro

@@ -5,19 +5,22 @@ import Search from "./Search.astro";
 import ThemeToggle from "./ThemeToggle.astro";
 import { headerNavItems } from "./navigationConfig";
 import { groupedNavbarParents, navbarParents, pages } from "./navigationConfig";
+import { NavContents } from "./NavContents";
 ---
 
 <header
   class="sticky top-0 z-50 w-full border-b border-border/40 g-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 h-16"
 >
   <div class="h-full container flex items-center">
     <div class="md:flex">
-      <MobileNavbar
-        groupedNavbarParents={groupedNavbarParents}
-        navbarParents={navbarParents}
-        pages={pages}
-        client:media="(max-width: 768px)"
-      />
+      <MobileNavbar client:media="(max-width: 768px)">
+        <NavContents
+          groupedNavbarParents={groupedNavbarParents}
+          navbarParents={navbarParents}
+          pages={pages}
+          client:visible
+        />
+      </MobileNavbar>
       <a class="hover:underline mr-6 hidden md:block" href="/">VocaDB Wiki</a>
       <nav class="hidden md:flex items-center gap-6 text-sm">
         {