Translate to pt, fix some ui details, add proper icon and logo

src/components/layout/Sidebar.tsx

@@ -1,42 +1,49 @@
 import {
   FileClock,
   Gauge,
+  LogOut,
   RadioTower,
   Settings,
   Shield,
   Wrench,
 } from 'lucide-react';
 
+import logoIcon from '@/assets/logo-icon.png';
+
 const items = [
-  ['Dashboard', Gauge],
-  ['UDP2RAW Config', RadioTower],
-  ['Provisioning', Wrench],
-  ['Activity Logs', FileClock],
-  ['Workstation', Settings],
+  ['Painel', Gauge],
+  ['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 flex-col border-r border-white/10 bg-ink-950 px-4 py-5">
-      <div className="mb-8 flex items-center gap-3">
-        <div className="rounded-2xl bg-blue-500/15 p-3 text-blue-300">
-          <Shield />
-        </div>
+      <div className="mb-10 flex items-center gap-4 px-1">
+        <img
+          src={logoIcon}
+          alt="Litoral Regas"
+          className="h-12 w-12 shrink-0 object-contain"
+        />
 
-        <div>
-          <h1 className="font-bold text-white">
+        <div className="min-w-0">
+          <h1 className="truncate text-[20px] font-bold leading-none text-white">
             Litoral Regas
           </h1>
 
-          <p className="text-xs text-slate-400">
+          <p className="mt-1 text-[11px] font-medium uppercase tracking-[0.12em] text-blue-300/70">
             VPN Orchestrator
           </p>
         </div>
@@ -51,11 +58,10 @@ export function Sidebar({
               key={label}
               type="button"
               onClick={() => onSelect(label)}
-              className={`flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left text-sm font-medium transition ${
-                isActive
-                  ? 'bg-blue-500/15 text-blue-200'
-                  : 'text-slate-300 hover:bg-white/5 hover:text-white'
-              }`}
+              className={`flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left text-sm font-medium transition ${isActive
+                ? 'bg-blue-500/15 text-blue-200'
+                : 'text-slate-300 hover:bg-white/5 hover:text-white'
+                }`}
             >
               <Icon size={18} />
               {label}
@@ -64,19 +70,15 @@ export function Sidebar({
         })}
       </nav>
 
-      <div className="mt-auto rounded-2xl border border-white/10 bg-white/[0.03] p-4">
-        <div className="flex items-center gap-2 text-sm text-green-300">
-          <span className="h-2 w-2 rounded-full bg-green-400" />
-          Backend connected
-        </div>
-
-        <p className="mt-2 text-xs text-slate-400">
-          localhost:8080
-        </p>
-
-        <div className="mt-5 border-t border-white/10 pt-4 text-xs text-slate-500">
-          Version 1.0.0
-        </div>
+      <div className="mt-auto border-t border-white/10 pt-4">
+        <button
+          type="button"
+          onClick={onLogout}
+          className="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left text-sm font-medium text-slate-300 transition hover:bg-red-500/10 hover:text-red-200"
+        >
+          <LogOut size={18} />
+          Terminar Sessão
+        </button>
       </div>
     </aside>
   );