Fix: Hydration mismatch by extracting MobileSidebar and using isMounted check

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