litoral05
99 lines
2.9 KiB
TypeScript
99 lines
2.9 KiB
TypeScript
import {
|
|
FileClock,
|
|
Gauge,
|
|
LogOut,
|
|
RadioTower,
|
|
Settings,
|
|
Wrench,
|
|
Router
|
|
} from 'lucide-react';
|
|
|
|
import logoIcon from '@/assets/logo-icon.png';
|
|
|
|
const items = [
|
|
['Painel', Gauge],
|
|
['Controladores', Router],
|
|
['Configuração UDP2RAW', RadioTower],
|
|
['Provisionamento', Wrench],
|
|
['Registos de Atividade', FileClock],
|
|
['Posto de Trabalho', Settings],
|
|
] as const;
|
|
|
|
type SidebarProps = {
|
|
active: string;
|
|
onSelect: (value: string) => void;
|
|
onLogout: () => void;
|
|
};
|
|
|
|
export function Sidebar({
|
|
active,
|
|
onSelect,
|
|
onLogout,
|
|
}: SidebarProps) {
|
|
return (
|
|
<aside className="flex h-screen w-64 shrink-0 flex-col border-r border-white/10 bg-[#020817] px-4 py-5">
|
|
<div className="mb-8 flex items-center gap-4 px-1">
|
|
<img
|
|
src={logoIcon}
|
|
alt="Litoral Regas"
|
|
className="h-12 w-12 shrink-0 object-contain"
|
|
/>
|
|
|
|
<div className="min-w-0">
|
|
<h1 className="truncate text-[28px] font-black leading-none text-white">
|
|
Litoral Regas
|
|
</h1>
|
|
|
|
<p className="mt-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-blue-300/70">
|
|
VPN Orchestrator
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<nav className="space-y-2">
|
|
{items.map(([label, Icon]) => {
|
|
const isActive = active === label;
|
|
|
|
return (
|
|
<button
|
|
key={label}
|
|
type="button"
|
|
onClick={() => onSelect(label)}
|
|
className={`group flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-left text-sm font-semibold transition-all duration-200 ${isActive
|
|
? 'border border-blue-500/20 bg-blue-500/15 text-white shadow-[0_0_25px_rgba(59,130,246,0.12)]'
|
|
: 'border border-transparent text-slate-300 hover:border-white/5 hover:bg-white/[0.035] hover:text-white'
|
|
}`}
|
|
>
|
|
<div
|
|
className={`rounded-xl p-2 transition ${isActive
|
|
? 'bg-blue-500/10 text-blue-300'
|
|
: 'bg-white/[0.03] text-slate-400 group-hover:text-slate-200'
|
|
}`}
|
|
>
|
|
<Icon size={17} />
|
|
</div>
|
|
|
|
<span className="truncate">
|
|
{label}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="mt-auto border-t border-white/10 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={onLogout}
|
|
className="group flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-left text-sm font-semibold text-slate-300 transition-all duration-200 hover:bg-red-500/10 hover:text-red-200"
|
|
>
|
|
<div className="rounded-xl bg-white/[0.03] p-2 text-slate-400 transition group-hover:bg-red-500/10 group-hover:text-red-300">
|
|
<LogOut size={17} />
|
|
</div>
|
|
|
|
<span>Terminar Sessão</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
);
|
|
} |