"use client"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { useState, useCallback, useEffect, useRef } from "react"; import { ChevronLeft, ChevronRight, Building2, LogOut, Zap, Pencil, GripVertical, Check, X, } from "lucide-react"; import { cn } from "@/lib/utils"; import { adminNavigation, type NavGroup, type NavItem } from "@/lib/navigation"; import { useSidebar, MIN_WIDTH, MAX_WIDTH } from "./SidebarContext"; export function Sidebar() { const pathname = usePathname(); const { collapsed, setCollapsed, sidebarWidth, customWidth, setCustomWidth, setIsResizing, isMobile, editMode, setEditMode, triggerDiscard } = useSidebar(); const [hoveredItem, setHoveredItem] = useState(null); const [orderedNav, setOrderedNav] = useState(adminNavigation); const [originalNav, setOriginalNav] = useState(adminNavigation); const [dragItem, setDragItem] = useState<{ groupIdx: number; itemIdx: number } | null>(null); const [dragOverItem, setDragOverItem] = useState<{ groupIdx: number; itemIdx: number } | null>(null); const sidebarRef = useRef(null); // Auto-close on mobile after navigation useEffect(() => { if (isMobile && !collapsed) { setCollapsed(true); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [pathname]); // Resize handle drag const handleResizeStart = useCallback((e: React.MouseEvent) => { if (isMobile) return; e.preventDefault(); setIsResizing(true); const startX = e.clientX; const startWidth = customWidth; const onMove = (ev: MouseEvent) => { const delta = ev.clientX - startX; setCustomWidth(startWidth + delta); }; const onUp = () => { setIsResizing(false); document.removeEventListener("mousemove", onMove); document.removeEventListener("mouseup", onUp); document.body.style.cursor = ""; document.body.style.userSelect = ""; }; document.body.style.cursor = "col-resize"; document.body.style.userSelect = "none"; document.addEventListener("mousemove", onMove); document.addEventListener("mouseup", onUp); }, [customWidth, setCustomWidth, setIsResizing, isMobile]); // Drag & drop for reordering const handleDragStart = (groupIdx: number, itemIdx: number) => { setDragItem({ groupIdx, itemIdx }); }; const handleDragOver = (e: React.DragEvent, groupIdx: number, itemIdx: number) => { e.preventDefault(); setDragOverItem({ groupIdx, itemIdx }); }; const handleDrop = (groupIdx: number, itemIdx: number) => { if (!dragItem) return; const newNav = orderedNav.map(g => ({ ...g, items: [...g.items] })); const [removed] = newNav[dragItem.groupIdx].items.splice(dragItem.itemIdx, 1); newNav[groupIdx].items.splice(itemIdx, 0, removed); setOrderedNav(newNav); setDragItem(null); setDragOverItem(null); }; const isDashboard = (item: NavItem) => item.href === "/admin"; // On mobile: sidebar is hidden when collapsed, overlays when expanded // On desktop: sidebar pushes content const mobileExpanded = isMobile && !collapsed; const actualWidth = isMobile ? (collapsed ? 0 : customWidth) : sidebarWidth; const displayNav = editMode ? orderedNav : orderedNav; return ( <> {/* Mobile backdrop overlay */} {mobileExpanded && (
setCollapsed(true)} /> )} ); }