Refactor dashboard sidebar
This commit is contained in:
gpt-engineer-app[bot]
@@ -39,7 +39,14 @@ import {
|
||||
ChevronRight,
|
||||
Hotel,
|
||||
UtensilsCrossed,
|
||||
Brain
|
||||
Brain,
|
||||
DoorOpen,
|
||||
BellRing,
|
||||
Key,
|
||||
Receipt,
|
||||
ChefHat,
|
||||
Grid3x3,
|
||||
Package
|
||||
} from 'lucide-react';
|
||||
|
||||
const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
|
||||
@@ -60,10 +67,35 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
|
||||
|
||||
const menuItems = [
|
||||
{ icon: Home, label: 'Dashboard', path: '/dashboard' },
|
||||
{ icon: Settings, label: 'Admin Panel', path: '/dashboard/admin' },
|
||||
{ icon: Plus, label: 'Channel Manager', path: '/dashboard/channel-manager' },
|
||||
{ icon: Hotel, label: 'Hotel Management', path: '/dashboard/hotel-management' },
|
||||
{ icon: UtensilsCrossed, label: 'Restaurant POS', path: '/dashboard/restaurant-pos' },
|
||||
{ icon: Settings, label: 'Admin Panel', path: '/dashboard/admin', hasSubmenu: true },
|
||||
{ icon: Plus, label: 'Channel Manager', path: '/dashboard/channel-manager', hasSubmenu: true },
|
||||
{
|
||||
icon: Hotel,
|
||||
label: 'Hotel Management',
|
||||
path: '/dashboard/hotel',
|
||||
subItems: [
|
||||
{ icon: Home, label: 'Habitaciones', path: '/dashboard/hotel/rooms' },
|
||||
{ icon: DoorOpen, label: 'Check-in', path: '/dashboard/hotel/checkin' },
|
||||
{ icon: BellRing, label: 'Room Service', path: '/dashboard/hotel/room-service' },
|
||||
{ icon: Key, label: 'Acceso', path: '/dashboard/hotel/keyless' },
|
||||
{ icon: Users, label: 'Personal', path: '/dashboard/hotel/staff' }
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: UtensilsCrossed,
|
||||
label: 'Restaurant POS',
|
||||
path: '/dashboard/restaurant',
|
||||
subItems: [
|
||||
{ icon: CreditCard, label: 'POS Terminal', path: '/dashboard/restaurant/pos' },
|
||||
{ icon: Receipt, label: 'Pedidos', path: '/dashboard/restaurant/orders' },
|
||||
{ icon: ChefHat, label: 'Cocina', path: '/dashboard/restaurant/kitchen' },
|
||||
{ icon: Receipt, label: 'Cuentas', path: '/dashboard/restaurant/bills' },
|
||||
{ icon: Grid3x3, label: 'Mesas', path: '/dashboard/restaurant/tables' },
|
||||
{ icon: UtensilsCrossed, label: 'Menú', path: '/dashboard/restaurant/menu' },
|
||||
{ icon: Package, label: 'Inventario', path: '/dashboard/restaurant/inventory' },
|
||||
{ icon: Users, label: 'Personal', path: '/dashboard/restaurant/staff' }
|
||||
]
|
||||
},
|
||||
{ icon: Brain, label: 'Personalization', path: '/dashboard/personalization' },
|
||||
{ icon: Wallet, label: 'Wallet', path: '/dashboard/wallet' },
|
||||
{ icon: MessageSquare, label: 'Message', path: '/dashboard/messages', badge: '2' },
|
||||
@@ -168,37 +200,74 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
|
||||
<div className="space-y-1 pr-8">
|
||||
{menuItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = location.pathname === item.path;
|
||||
const isActive = location.pathname === item.path || location.pathname.startsWith(item.path + '/');
|
||||
const isAdminPanel = item.path === '/dashboard/admin';
|
||||
const isChannelManager = item.path === '/dashboard/channel-manager';
|
||||
const hasDirectSubItems = item.subItems && item.subItems.length > 0;
|
||||
const isExpanded = expandedItems[item.path] || (hasDirectSubItems && item.subItems.some(sub => location.pathname === sub.path));
|
||||
|
||||
return (
|
||||
<div key={item.path}>
|
||||
<Link
|
||||
to={item.path}
|
||||
className={`flex items-center space-x-3 px-7 py-2.5 rounded-none transition-all border-l-4 ${
|
||||
isActive
|
||||
? 'text-white border-l-4 rounded-r-full'
|
||||
: 'text-gray-700 hover:text-red-500 border-transparent rounded-r-full'
|
||||
} ${sidebarCollapsed ? 'justify-center px-2' : ''}`}
|
||||
style={{
|
||||
backgroundColor: isActive ? 'rgba(248, 69, 37, 1)' : 'transparent',
|
||||
borderLeftColor: isActive ? '#F84525' : 'transparent',
|
||||
color: isActive ? '#F84525' : '#433c3a'
|
||||
}}
|
||||
>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<span className="font-medium">{item.label}</span>
|
||||
{item.badge && (
|
||||
<span className="bg-green-500 text-white text-xs px-2 py-0.5 rounded-full">
|
||||
{item.badge}
|
||||
</span>
|
||||
<div className={`flex items-center justify-between ${sidebarCollapsed ? '' : 'pr-2'}`}>
|
||||
<Link
|
||||
to={item.path}
|
||||
className={`flex items-center space-x-3 px-7 py-2.5 rounded-none transition-all border-l-4 flex-1 ${
|
||||
isActive
|
||||
? 'text-white border-l-4 rounded-r-full'
|
||||
: 'text-gray-700 hover:text-red-500 border-transparent rounded-r-full'
|
||||
} ${sidebarCollapsed ? 'justify-center px-2' : ''}`}
|
||||
style={{
|
||||
backgroundColor: isActive ? 'rgba(248, 69, 37, 1)' : 'transparent',
|
||||
borderLeftColor: isActive ? '#F84525' : 'transparent',
|
||||
color: isActive ? '#F84525' : '#433c3a'
|
||||
}}
|
||||
>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<span className="font-medium">{item.label}</span>
|
||||
{item.badge && (
|
||||
<span className="bg-green-500 text-white text-xs px-2 py-0.5 rounded-full">
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
{!sidebarCollapsed && hasDirectSubItems && (
|
||||
<button
|
||||
onClick={() => toggleExpanded(item.path)}
|
||||
className="p-1 hover:bg-gray-200 rounded mr-2"
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="w-3 h-3" />
|
||||
) : (
|
||||
<ChevronRight className="w-3 h-3" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Direct sub-items (Hotel & Restaurant) */}
|
||||
{!sidebarCollapsed && hasDirectSubItems && isExpanded && (
|
||||
<div className="mt-1 ml-10 space-y-1">
|
||||
{item.subItems.map((sub) => {
|
||||
const SubIcon = sub.icon;
|
||||
const activeSubPath = location.pathname === sub.path;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={sub.path}
|
||||
to={sub.path}
|
||||
className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm ${activeSubPath ? 'bg-orange-50 text-orange-800' : 'text-gray-600 hover:text-orange-600 hover:bg-gray-50'}`}
|
||||
>
|
||||
<SubIcon className="w-4 h-4" />
|
||||
<span>{sub.label}</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Channel Manager submenus */}
|
||||
{!sidebarCollapsed && isChannelManager && location.pathname.startsWith('/dashboard/channel-manager') && (
|
||||
|
||||
Reference in New Issue
Block a user