Feat: Mobile responsiveness improvements (sidebar, calendar)
This commit is contained in:
@@ -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 } from 'react'
|
||||
import { useState, useMemo, useEffect } 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,6 +40,14 @@ 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
|
||||
@@ -51,19 +59,14 @@ export function CalendarView({ events = [], halls = [] }: CalendarViewProps) {
|
||||
}
|
||||
|
||||
const handleSelectSlot = ({ start, end }: { start: Date, end: Date }) => {
|
||||
// Optional: Navigate to create page with pre-filled dates
|
||||
// const params = new URLSearchParams()
|
||||
// params.set('date', format(start, 'yyyy-MM-dd'))
|
||||
// params.set('start', format(start, 'HH:mm'))
|
||||
// params.set('end', format(end, 'HH:mm'))
|
||||
// router.push(`/dashboard/reservations/new?${params.toString()}`)
|
||||
// Optional: Navigate to create page
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="h-[700px] flex flex-col">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
|
||||
<Card className="h-[calc(100vh-10rem)] min-h-[500px] flex flex-col">
|
||||
<CardHeader className="flex flex-col md:flex-row items-start md:items-center justify-between space-y-2 md:space-y-0 pb-4">
|
||||
<CardTitle>Rezervasyon Takvimi</CardTitle>
|
||||
<div className="w-[200px]">
|
||||
<div className="w-full md:w-[200px]">
|
||||
<Select value={selectedHallId} onValueChange={setSelectedHallId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Salon Seçin" />
|
||||
@@ -77,40 +80,44 @@ export function CalendarView({ events = [], halls = [] }: CalendarViewProps) {
|
||||
</Select>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 pb-4">
|
||||
<CardContent className="flex-1 pb-4 overflow-hidden">
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger className="h-full w-full">
|
||||
<Calendar
|
||||
localizer={localizer}
|
||||
events={filteredEvents}
|
||||
startAccessor="start"
|
||||
endAccessor="end"
|
||||
style={{ height: '100%' }}
|
||||
culture='tr'
|
||||
view={view}
|
||||
onView={setView}
|
||||
date={date}
|
||||
onNavigate={setDate}
|
||||
selectable
|
||||
onSelectSlot={handleSelectSlot}
|
||||
onDoubleClickEvent={handleDoubleClickEvent}
|
||||
messages={{
|
||||
next: "İleri",
|
||||
previous: "Geri",
|
||||
today: "Bugün",
|
||||
month: "Ay",
|
||||
week: "Hafta",
|
||||
day: "Gün",
|
||||
agenda: "Ajanda",
|
||||
date: "Tarih",
|
||||
time: "Saat",
|
||||
event: "Etkinlik",
|
||||
noEventsInRange: "Bu aralıkta etkinlik yok."
|
||||
}}
|
||||
eventPropGetter={(event) => ({
|
||||
className: "bg-primary text-primary-foreground text-xs rounded-md border-none px-2 py-1 shadow-sm hover:bg-primary/90 transition-colors cursor-pointer"
|
||||
})}
|
||||
/>
|
||||
<div className="h-full w-full overflow-x-auto">
|
||||
<div className="min-w-[300px] h-full">
|
||||
<Calendar
|
||||
localizer={localizer}
|
||||
events={filteredEvents}
|
||||
startAccessor="start"
|
||||
endAccessor="end"
|
||||
style={{ height: '100%' }}
|
||||
culture='tr'
|
||||
view={view}
|
||||
onView={setView}
|
||||
date={date}
|
||||
onNavigate={setDate}
|
||||
selectable
|
||||
onSelectSlot={handleSelectSlot}
|
||||
onDoubleClickEvent={handleDoubleClickEvent}
|
||||
messages={{
|
||||
next: "İleri",
|
||||
previous: "Geri",
|
||||
today: "Bugün",
|
||||
month: "Ay",
|
||||
week: "Hafta",
|
||||
day: "Gün",
|
||||
agenda: "Ajanda",
|
||||
date: "Tarih",
|
||||
time: "Saat",
|
||||
event: "Etkinlik",
|
||||
noEventsInRange: "Bu aralıkta etkinlik yok."
|
||||
}}
|
||||
eventPropGetter={(event) => ({
|
||||
className: "bg-primary text-primary-foreground text-xs rounded-md border-none px-2 py-1 shadow-sm hover:bg-primary/90 transition-colors cursor-pointer"
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ContextMenuTrigger>
|
||||
<ContextMenuContent>
|
||||
<ContextMenuItem onClick={() => router.push('/dashboard/reservations/new')}>
|
||||
|
||||
@@ -6,10 +6,15 @@ import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { CalendarDays, Users, Home, Settings, Building2, CreditCard, LogOut } from "lucide-react"
|
||||
|
||||
interface MainNavProps extends React.HTMLAttributes<HTMLElement> {
|
||||
onNavClick?: () => void
|
||||
}
|
||||
|
||||
export function MainNav({
|
||||
className,
|
||||
onNavClick,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLElement>) {
|
||||
}: MainNavProps) {
|
||||
const pathname = usePathname()
|
||||
|
||||
const routes = [
|
||||
@@ -65,7 +70,7 @@ export function MainNav({
|
||||
|
||||
<div className="flex-1 px-2 space-y-1">
|
||||
{routes.map((route) => (
|
||||
<Link key={route.href} href={route.href}>
|
||||
<Link key={route.href} href={route.href} onClick={onNavClick}>
|
||||
<Button
|
||||
variant={route.active ? "secondary" : "ghost"}
|
||||
className={cn(
|
||||
|
||||
Reference in New Issue
Block a user