// File: components/layout/sidebar.tsx
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import { useUIStore } from "@/lib/stores/ui-store";
import { sidebarMenuItems, adminMenuItems } from "@/config/menu";
import { Button } from "@/components/ui/button";
import { ChevronLeft, Menu, X } from "lucide-react";
import { useEffect } from "react"; // ✅ Import useEffect
export function Sidebar() {
const pathname = usePathname();
const { isSidebarOpen, toggleSidebar, closeSidebar } = useUIStore();
// ✅ เพิ่ม Logic นี้: ปิด Sidebar อัตโนมัติเมื่อหน้าจอเล็กกว่า 768px (Mobile)
useEffect(() => {
const handleResize = () => {
if (window.innerWidth < 768 && isSidebarOpen) {
closeSidebar();
}
};
// ติดตั้ง Listener
window.addEventListener("resize", handleResize);
// ล้าง Listener เมื่อ Component ถูกทำลาย
return () => window.removeEventListener("resize", handleResize);
}, [isSidebarOpen, closeSidebar]);
return (
<>
{/* Mobile Overlay */}
{/* Sidebar Container */}
);
}