84 lines
3.3 KiB
JavaScript
84 lines
3.3 KiB
JavaScript
// File: frontend/app/(protected)/_components/SideNavigation.jsx
|
|
'use client'; // <-- 1. กำหนดให้ไฟล์นี้เป็น Client Component
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { Home, FileText, Settings, Package2 } from 'lucide-react';
|
|
import { can } from "@/lib/rbac";
|
|
import { cn } from "@/lib/utils";
|
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
export function SideNavigation({ user }) { // 2. รับข้อมูล user มาจาก props
|
|
const pathname = usePathname(); // 3. ใช้งาน usePathname ได้แล้ว
|
|
|
|
const navLinks = [
|
|
{ href: '/dashboard', label: 'Dashboard', icon: Home },
|
|
{ href: '/correspondences', label: 'Correspondences', icon: FileText },
|
|
{ href: '/drawings', label: 'Drawings', icon: FileText },
|
|
// ... เพิ่มเมนูอื่นๆ ตามต้องการ
|
|
];
|
|
|
|
const adminLink = {
|
|
href: '/admin/users',
|
|
label: 'Admin',
|
|
icon: Settings,
|
|
requiredPermission: 'manage_users'
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-full max-h-screen flex-col gap-2">
|
|
<div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
|
|
<Link href="/dashboard" className="flex items-center gap-2 font-semibold">
|
|
<Package2 className="h-6 w-6" />
|
|
<span className="">LCB P3 DMS</span>
|
|
</Link>
|
|
</div>
|
|
<div className="flex-1">
|
|
<nav className="grid items-start px-2 text-sm font-medium lg:px-4">
|
|
{navLinks.map(({ href, label, icon: Icon }) => (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={cn(
|
|
'flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary',
|
|
// ตรวจสอบ Path ปัจจุบันเพื่อ active เมนู
|
|
pathname === href || (href !== '/dashboard' && pathname.startsWith(href)) ? 'bg-muted text-primary' : ''
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
{label}
|
|
</Link>
|
|
))}
|
|
|
|
{user && can(user, adminLink.requiredPermission) && (
|
|
<>
|
|
<div className="my-2 border-t"></div>
|
|
<Link
|
|
href={adminLink.href}
|
|
className={cn(
|
|
'flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary',
|
|
pathname.startsWith('/admin') ? 'bg-muted text-primary' : ''
|
|
)}
|
|
>
|
|
<adminLink.icon className="h-4 w-4" />
|
|
{adminLink.label}
|
|
</Link>
|
|
</>
|
|
)}
|
|
</nav>
|
|
</div>
|
|
<div className="mt-auto p-4">
|
|
<Card>
|
|
<CardHeader className="p-2 pt-0 md:p-4">
|
|
<CardTitle>Need Help?</CardTitle>
|
|
<CardDescription>Contact support for any issues.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="p-2 pt-0 md:p-4 md:pt-0">
|
|
<Button size="sm" className="w-full">Contact Support</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |