Fixed responsiveness

src/components/layout/Sidebar.tsx

@@ -4,7 +4,6 @@ import {
   LogOut,
   RadioTower,
   Settings,
-  Shield,
   Wrench,
 } from 'lucide-react';
 
@@ -30,8 +29,8 @@ export function Sidebar({
   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-10 flex items-center gap-4 px-1">
+    <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"
@@ -39,17 +38,17 @@ export function Sidebar({
         />
 
         <div className="min-w-0">
-          <h1 className="truncate text-[20px] font-bold leading-none text-white">
+          <h1 className="truncate text-[28px] font-black leading-none text-white">
             Litoral Regas
           </h1>
 
-          <p className="mt-1 text-[11px] font-medium uppercase tracking-[0.12em] text-blue-300/70">
+          <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-1">
+      <nav className="space-y-2">
         {items.map(([label, Icon]) => {
           const isActive = active === label;
 
@@ -58,13 +57,25 @@ 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={`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'
+              }`}
             >
-              <Icon size={18} />
-              {label}
+              <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>
           );
         })}
@@ -74,10 +85,13 @@ export function Sidebar({
         <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"
+          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"
         >
-          <LogOut size={18} />
-          Terminar Sessão
+          <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>