Spaces:
Build error
Build error
File size: 3,422 Bytes
49e53ae | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 'use client';
import {
LayoutDashboard,
Activity,
Settings,
Cpu,
HelpCircle
} from 'lucide-react';
interface SidebarProps {
activeTab: string;
onTabChange: (tab: string) => void;
}
export default function Sidebar({ activeTab, onTabChange }: SidebarProps) {
const menuItems = [
{ id: 'dashboard', icon: LayoutDashboard, label: 'Dashboard', description: 'Live monitoring' },
{ id: 'models', icon: Cpu, label: 'Models', description: 'Quantum & Classical' },
];
return (
<aside className="fixed left-0 top-0 h-screen w-16 bg-white border-r border-gray-200 flex flex-col items-center py-4 z-50 shadow-sm">
{/* Logo */}
<div className="mb-6">
<img
src="/logo.png"
alt="QFD Logo"
className="w-10 h-10 rounded-xl object-contain"
/>
</div>
{/* Main Menu */}
<nav className="flex-1 flex flex-col items-center gap-1 w-full px-2">
{menuItems.map((item) => {
const Icon = item.icon;
const isActive = activeTab === item.id;
return (
<button
key={item.id}
onClick={() => onTabChange(item.id)}
className={`w-full p-3 rounded-lg transition-all duration-200 flex items-center justify-center group relative ${
isActive
? 'bg-gray-900 text-white shadow-md'
: 'text-gray-500 hover:bg-gray-100 hover:text-gray-900'
}`}
title={item.label}
>
<Icon size={20} />
{/* Tooltip */}
<div className="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50 shadow-lg">
{item.label}
</div>
</button>
);
})}
</nav>
{/* Bottom Menu */}
<div className="flex flex-col items-center gap-1 w-full px-2">
<button
onClick={() => onTabChange('settings')}
className={`w-full p-3 rounded-lg transition-all duration-200 flex items-center justify-center group relative ${
activeTab === 'settings'
? 'bg-gray-900 text-white shadow-md'
: 'text-gray-500 hover:bg-gray-100 hover:text-gray-900'
}`}
title="Settings"
>
<Settings size={20} />
<div className="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50 shadow-lg">
Settings
</div>
</button>
<button
className="w-full p-3 rounded-lg text-gray-500 hover:bg-gray-100 hover:text-gray-900 transition-all duration-200 flex items-center justify-center group relative"
title="Help"
onClick={() => window.open('https://github.com', '_blank')}
>
<HelpCircle size={20} />
<div className="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50 shadow-lg">
Help & Docs
</div>
</button>
</div>
</aside>
);
}
|