57 lines
2.0 KiB
TypeScript
Executable File
57 lines
2.0 KiB
TypeScript
Executable File
/**
|
|
* Sidebar.tsx
|
|
*
|
|
* @author Descomplicar® Crescimento Digital
|
|
* @link https://descomplicar.pt
|
|
* @copyright 2025 Descomplicar®
|
|
*/
|
|
|
|
|
|
import React from 'react';
|
|
import { DashboardIcon } from './icons/DashboardIcon';
|
|
import { SettingsIcon } from './icons/SettingsIcon';
|
|
import { AccountIcon } from './icons/AccountIcon';
|
|
import { HelpIcon } from './icons/HelpIcon';
|
|
|
|
interface SidebarProps {
|
|
activeView: string;
|
|
setActiveView: (view: string) => void;
|
|
}
|
|
|
|
const Sidebar: React.FC<SidebarProps> = ({ activeView, setActiveView }) => {
|
|
|
|
const navItems = [
|
|
{ id: 'dashboard', name: 'Dashboard', icon: <DashboardIcon className="w-5 h-5" /> },
|
|
{ id: 'contas', name: 'Contas', icon: <AccountIcon className="w-5 h-5" /> },
|
|
{ id: 'configuracoes', name: 'Configurações', icon: <SettingsIcon className="w-5 h-5" /> },
|
|
{ id: 'ajuda', name: 'Ajuda', icon: <HelpIcon className="w-5 h-5" /> },
|
|
];
|
|
|
|
return (
|
|
<aside className="w-64 bg-white dark:bg-slate-800/50 p-4 border-r border-slate-200 dark:border-slate-700 hidden md:block">
|
|
<nav className="flex flex-col gap-2">
|
|
{navItems.map(item => (
|
|
<a
|
|
key={item.id}
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
setActiveView(item.id);
|
|
}}
|
|
className={`flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors ${
|
|
activeView === item.id
|
|
? 'bg-sky-500 text-white'
|
|
: 'text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'
|
|
}`}
|
|
>
|
|
{item.icon}
|
|
<span>{item.name}</span>
|
|
</a>
|
|
))}
|
|
</nav>
|
|
</aside>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|