Fix: Hydration mismatch by extracting MobileSidebar and using isMounted check

src/app/dashboard/layout.tsx

@@ -1,19 +1,13 @@
-'use client'
-
 import { MainNav } from "@/components/main-nav"
 import { UserNav } from "@/components/user-nav"
-import { Building, Menu } from "lucide-react"
+import { Building } from "lucide-react"
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
+import { MobileSidebar } from "@/components/mobile-sidebar"
-import { Button } from "@/components/ui/button"
-import { useState } from "react"
 
 export default function DashboardLayout({
     children,
 }: {
     children: React.ReactNode
 }) {
-    const [isMobileOpen, setIsMobileOpen] = useState(false)
-
     return (
         <div className="flex min-h-screen bg-gray-50/50 dark:bg-gray-900/50">
             {/* Desktop Sidebar */}
@@ -26,17 +20,7 @@ export default function DashboardLayout({
                 {/* Header */}
                 <header className="sticky top-0 z-40 h-16 glass border-b px-4 md:px-6 flex items-center justify-between">
                     <div className="flex items-center gap-2 md:hidden">
-                        <Sheet open={isMobileOpen} onOpenChange={setIsMobileOpen}>
+                        <MobileSidebar />
-                            <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={() => setIsMobileOpen(false)} />
-                            </SheetContent>
-                        </Sheet>
                         <div className="flex items-center font-bold text-lg">
                             <Building className="mr-2 h-5 w-5 text-primary" />
                             WeddingOS

src/components/calendar-view.tsx

@@ -7,7 +7,7 @@ import startOfWeek from 'date-fns/startOfWeek'
 import getDay from 'date-fns/getDay'
 import tr from 'date-fns/locale/tr'
 import "react-big-calendar/lib/css/react-big-calendar.css"
-import { useState, useMemo, useEffect } from 'react'
+import { useState, useMemo } from 'react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { useRouter } from 'next/navigation'
@@ -40,14 +40,6 @@ export function CalendarView({ events = [], halls = [] }: CalendarViewProps) {
     const [view, setView] = useState<View>(Views.MONTH)
     const [date, setDate] = useState(new Date())
     const [selectedHallId, setSelectedHallId] = useState<string>("all")
-    const [isMobile, setIsMobile] = useState(false)
-
-    useEffect(() => {
-        const checkMobile = () => setIsMobile(window.innerWidth < 768)
-        checkMobile()
-        window.addEventListener('resize', checkMobile)
-        return () => window.removeEventListener('resize', checkMobile)
-    }, [])
 
     const filteredEvents = useMemo(() => {
         if (selectedHallId === "all") return events

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>
+    )
+}