55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import type { SidebarProps } from '@/types/component-props';
|
|
import Link from 'next/link';
|
|
|
|
export default function Sidebar({ activePath, onNavigate }: SidebarProps) {
|
|
const [isCollapsed, setIsCollapsed] = useState(false);
|
|
|
|
const navItems = [
|
|
{ path: '/dashboard', label: 'Dashboard', icon: '📊' },
|
|
{ path: '/recordings', label: 'Recordings', icon: '🎙️' },
|
|
{ path: '/apps', label: 'Generated Apps', icon: '🚀' },
|
|
];
|
|
|
|
const handleNavClick = (path: string) => {
|
|
onNavigate?.(path);
|
|
};
|
|
|
|
return (
|
|
<aside
|
|
className={`bg-gray-50 border-r transition-all duration-300 ${
|
|
isCollapsed ? 'w-16' : 'w-64'
|
|
}`}
|
|
>
|
|
<div className="p-4">
|
|
<button
|
|
onClick={() => setIsCollapsed(!isCollapsed)}
|
|
className="w-full text-left text-sm text-gray-600 hover:text-gray-900 mb-6"
|
|
>
|
|
{isCollapsed ? '→' : '←'}
|
|
</button>
|
|
|
|
<nav className="space-y-2">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.path}
|
|
href={item.path}
|
|
onClick={() => handleNavClick(item.path)}
|
|
className={`flex items-center gap-3 px-3 py-2 rounded-md transition-colors ${
|
|
activePath === item.path
|
|
? 'bg-blue-100 text-blue-700'
|
|
: 'text-gray-700 hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
<span className="text-lg">{item.icon}</span>
|
|
{!isCollapsed && <span className="text-sm font-medium">{item.label}</span>}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|