Fix: Hydration mismatch by extracting MobileSidebar and using isMounted check

src/components/mobile-sidebar.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
+import { Button } from "@/components/ui/button"
+import { Menu } from "lucide-react"
+import { MainNav } from "@/components/main-nav"
+import { useState, useEffect } from "react"
+
+export function MobileSidebar() {
+    const [open, setOpen] = useState(false)
+    const [isMounted, setIsMounted] = useState(false)
+
+    useEffect(() => {
+        setIsMounted(true)
+    }, [])
+
+    if (!isMounted) {
+        return null
+    }
+
+    return (
+        <Sheet open={open} onOpenChange={setOpen}>
+            <SheetTrigger asChild>
+                <Button variant="ghost" size="icon" className="md:hidden">
+                    <Menu className="h-6 w-6" />
+                    <span className="sr-only">Menüyü aç</span>
+                </Button>
+            </SheetTrigger>
+            <SheetContent side="left" className="p-0 w-72">
+                <MainNav onNavClick={() => setOpen(false)} />
+            </SheetContent>
+        </Sheet>
+    )
+}