119 lines
4.1 KiB
TypeScript
119 lines
4.1 KiB
TypeScript
'use client'
|
||
|
||
import Link from "next/link"
|
||
import { usePathname } from "next/navigation"
|
||
import { cn } from "@/lib/utils"
|
||
import { Button } from "@/components/ui/button"
|
||
import { CalendarDays, Users, Home, Settings, Building2, CreditCard, LogOut, Receipt } from "lucide-react"
|
||
|
||
interface MainNavProps extends React.HTMLAttributes<HTMLElement> {
|
||
onNavClick?: () => void
|
||
user?: {
|
||
name: string | null
|
||
email: string | null
|
||
}
|
||
}
|
||
|
||
export function MainNav({
|
||
className,
|
||
onNavClick,
|
||
user,
|
||
...props
|
||
}: MainNavProps) {
|
||
const pathname = usePathname()
|
||
|
||
const routes = [
|
||
{
|
||
href: "/dashboard",
|
||
label: "Genel Bakış",
|
||
icon: Home,
|
||
active: pathname === "/dashboard",
|
||
},
|
||
{
|
||
href: "/dashboard/calendar",
|
||
label: "Takvim",
|
||
icon: CalendarDays,
|
||
active: pathname === "/dashboard/calendar",
|
||
},
|
||
{
|
||
href: "/dashboard/reservations",
|
||
label: "Rezervasyonlar",
|
||
icon: CreditCard,
|
||
active: pathname.startsWith("/dashboard/reservations"),
|
||
},
|
||
{
|
||
href: "/dashboard/customers",
|
||
label: "Müşteriler",
|
||
icon: Users,
|
||
active: pathname.startsWith("/dashboard/customers"),
|
||
},
|
||
{
|
||
href: "/dashboard/halls",
|
||
label: "Salonlar",
|
||
icon: Building2,
|
||
active: pathname.startsWith("/dashboard/halls"),
|
||
},
|
||
{
|
||
href: "/dashboard/expenses",
|
||
label: "Giderler",
|
||
icon: Receipt,
|
||
active: pathname.startsWith("/dashboard/expenses"),
|
||
},
|
||
{
|
||
href: "/dashboard/settings",
|
||
label: "Ayarlar",
|
||
icon: Settings,
|
||
active: pathname.startsWith("/dashboard/settings"),
|
||
},
|
||
]
|
||
|
||
const displayName = user?.name || user?.email?.split('@')[0] || 'Kullanıcı'
|
||
const displayEmail = user?.email || ''
|
||
const initial = displayName.charAt(0).toUpperCase()
|
||
|
||
return (
|
||
<nav
|
||
className={cn("flex flex-col space-y-2 py-4", className)}
|
||
{...props}
|
||
>
|
||
<div className="px-4 mb-6">
|
||
<h2 className="text-2xl font-bold bg-gradient-to-r from-primary to-purple-600 bg-clip-text text-transparent">
|
||
WeddingOS
|
||
</h2>
|
||
<p className="text-xs text-muted-foreground mt-1">Premium Salon Yönetimi</p>
|
||
</div>
|
||
|
||
<div className="flex-1 px-2 space-y-1">
|
||
{routes.map((route) => (
|
||
<Link key={route.href} href={route.href} onClick={onNavClick}>
|
||
<Button
|
||
variant={route.active ? "secondary" : "ghost"}
|
||
className={cn(
|
||
"w-full justify-start transition-all duration-200",
|
||
route.active
|
||
? "bg-primary/10 text-primary hover:bg-primary/20 font-semibold shadow-sm"
|
||
: "hover:bg-muted/50 text-muted-foreground hover:text-foreground"
|
||
)}
|
||
>
|
||
<route.icon className={cn("mr-3 h-5 w-5", route.active ? "text-primary" : "text-muted-foreground")} />
|
||
{route.label}
|
||
</Button>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
|
||
<div className="px-4 mt-auto pt-4 border-t">
|
||
<div className="flex items-center gap-3 mb-4 p-2 rounded-lg bg-muted/50">
|
||
<div className="h-8 w-8 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold">
|
||
{initial}
|
||
</div>
|
||
<div className="flex-1 overflow-hidden">
|
||
<p className="text-sm font-medium truncate">{displayName}</p>
|
||
<p className="text-xs text-muted-foreground truncate">{displayEmail}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
)
|
||
}
|