import React, { useState, useRef } from 'react'; import { LayoutGrid, Settings2, Trash2, GripVertical, X, Check } from 'lucide-react'; import { useNavigate } from 'react-router-dom'; import { Logo } from './Logo'; interface SidebarItem { id: string; label: string; icon: React.ReactNode; } interface SidebarProps { items: SidebarItem[]; onReorder: (newItems: SidebarItem[]) => void; onDelete: (id: string) => void; onItemClick: (id: string) => void; } export const Sidebar: React.FC = ({ items, onReorder, onDelete, onItemClick }) => { const navigate = useNavigate(); const [isEditing, setIsEditing] = useState(false); const dragItem = useRef(null); const dragOverItem = useRef(null); const handleDragStart = (e: React.DragEvent, position: number) => { dragItem.current = position; e.dataTransfer.effectAllowed = "move"; // Add a ghost class or style if needed }; const handleDragEnter = (e: React.DragEvent, position: number) => { dragOverItem.current = position; }; const handleDragEnd = (e: React.DragEvent) => { e.preventDefault(); if (dragItem.current !== null && dragOverItem.current !== null) { const copyListItems = [...items]; const dragItemContent = copyListItems[dragItem.current]; copyListItems.splice(dragItem.current, 1); copyListItems.splice(dragOverItem.current, 0, dragItemContent); onReorder(copyListItems); } dragItem.current = null; dragOverItem.current = null; }; return ( ); };