Correção do Botão de esconderbarra lateral principal

app/javascript/controllers/validacao_controller.js

@@ -7,6 +7,7 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = [
     "linha", "checkbox", "selecionarTodos", "busca", "buscaVazia",
+    "resumo", "listaCol", "btnResumoLabel",
     "toggles", "barra", "barraManuais", "percentual", "chipVeiculo",
     "contadorClassificadas", "contadorTotal", "contadorManuais", "manuaisInfo",
     "qtdNormal", "qtdRetirada", "qtdBonus", "qtdDesconto", "qtdExtraordinaria",
@@ -64,6 +65,17 @@ export default class extends Controller {
     }
   }
 
+  // ── Oculta/mostra o resumo lateral (lista ocupa a largura toda) ──
+  toggleResumo() {
+    const escondido = this.resumoTarget.classList.toggle("hidden")
+    if (this.hasListaColTarget) {
+      this.listaColTarget.classList.toggle("lg:col-span-4", escondido)
+      this.listaColTarget.classList.toggle("lg:col-span-3", !escondido)
+    }
+    if (this.hasBtnResumoLabelTarget)
+      this.btnResumoLabelTarget.textContent = escondido ? "Mostrar resumo" : "Ocultar resumo"
+  }
+
   // ── Busca na listagem de notas (filtra os cards por NF/local/endereço/veículo) ──
   filtrarBusca(event) {
     const q = (event.currentTarget.value || "").trim().toLowerCase()

app/views/consolidacao_entregas/validar.html.erb

@@ -104,7 +104,12 @@
               class="bg-purple-600 text-white font-bold px-3 py-2 rounded-lg text-xs min-h-[44px]">Extra</button>
     </div>
 
-    <div class="ml-auto">
+    <div class="ml-auto flex items-center gap-2">
+      <%# Oculta/mostra o resumo lateral (mais largura para a lista) %>
+      <button type="button" data-action="validacao#toggleResumo"
+              class="text-gray-400 hover:text-white text-sm border border-[#2a2a2a] hover:border-orange-500 px-3 py-2 rounded-lg whitespace-nowrap">
+        📊 <span data-validacao-target="btnResumoLabel">Ocultar resumo</span>
+      </button>
       <%= link_to params[:apenas_pendentes] == '1' ? 'Mostrar todas' : 'Apenas não classificadas',
           validar_consolidacao_consolidacao_entregas_path(@consolidacao, motorista: @motorista, vehicle: @veiculos_sel.presence,
             apenas_pendentes: params[:apenas_pendentes] == '1' ? nil : '1'),
@@ -262,7 +267,7 @@
   <div class="grid grid-cols-1 lg:grid-cols-4 gap-3 lg:flex-1 lg:min-h-0">
 
     <%# ── Lista de entregas (3 colunas) — área rolável ──── %>
-    <div class="lg:col-span-3 space-y-2 lg:overflow-y-auto lg:pr-1">
+    <div class="lg:col-span-3 space-y-2 lg:overflow-y-auto lg:pr-1" data-validacao-target="listaCol">
       <%# 🔍 Busca na listagem — filtra os cards por NF, local, endereço ou veículo %>
       <div class="sticky top-0 z-20 bg-[#0a0a0a] pb-2">
         <div class="relative">
@@ -331,7 +336,7 @@
     </div>
 
     <%# ── Resumo lateral (1 coluna) — rola junto se precisar ─────── %>
-    <div class="lg:col-span-1 lg:overflow-y-auto">
+    <div class="lg:col-span-1 lg:overflow-y-auto" data-validacao-target="resumo">
       <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl p-5 space-y-4">
         <h3 class="text-white font-bold">📊 Resumo</h3>
 

app/views/layouts/_navbar.html.erb

@@ -71,6 +71,15 @@
   </div>
 </aside>
 
+<%# Botão flutuante (desktop) — esconde/mostra a sidebar do site inteiro %>
+<button id="sidebar-toggle-btn" type="button" onclick="toggleSidebarCollapse()"
+        class="hidden md:flex fixed top-1/2 -translate-y-1/2 z-40 items-center justify-center
+               w-7 h-16 bg-[#1a1a1a] border border-[#2a2a2a] hover:border-orange-500
+               text-orange-500 rounded-r-lg shadow-lg"
+        title="Esconder/mostrar menu" aria-label="Esconder ou mostrar o menu">
+  <span id="sidebar-toggle-icon" class="text-lg leading-none">◀</span>
+</button>
+
 <%# Topbar mobile %>
 <header class="md:hidden fixed top-0 left-0 right-0 z-30 bg-[#111111] border-b border-[#2a2a2a] px-4 py-3 flex items-center justify-between">
   <button onclick="toggleSidebar()"
@@ -86,10 +95,24 @@
 <div class="h-14 md:hidden"></div>
 
 <script>
+  // Mobile: abre/fecha a sidebar por cima do conteúdo (hamburguer).
   function toggleSidebar() {
     const s = document.getElementById('sidebar');
     const o = document.getElementById('sidebar-overlay');
     s.classList.toggle('-translate-x-full');
     o.classList.toggle('hidden');
   }
+
+  // Desktop: recolhe/expande a sidebar (estado salvo p/ o site inteiro).
+  function toggleSidebarCollapse() {
+    const collapsed = document.documentElement.classList.toggle('sidebar-collapsed');
+    try { localStorage.setItem('sidebarCollapsed', collapsed ? '1' : '0'); } catch (e) {}
+    syncSidebarToggleIcon();
+  }
+  function syncSidebarToggleIcon() {
+    const icon = document.getElementById('sidebar-toggle-icon');
+    if (icon) icon.textContent =
+      document.documentElement.classList.contains('sidebar-collapsed') ? '▶' : '◀';
+  }
+  syncSidebarToggleIcon();
 </script>

app/views/layouts/application.html.erb

@@ -55,10 +55,29 @@
       animation: spin 0.8s linear infinite;
     }
     @keyframes spin { to { transform: rotate(360deg); } }
+    /* Sidebar recolhível no desktop (botão flutuante esconde/mostra o menu).
+       O estado fica na classe .sidebar-collapsed do <html>. */
+    @media (min-width: 768px) {
+      main, footer { transition: margin-left .3s ease; }
+      #sidebar-toggle-btn { left: 16rem; transition: left .3s ease; }
+      .sidebar-collapsed #sidebar { transform: translateX(-100%); }
+      .sidebar-collapsed main, .sidebar-collapsed footer { margin-left: 0; }
+      .sidebar-collapsed #sidebar-toggle-btn { left: 0; }
+    }
   </style>
 
   <%= javascript_importmap_tags %>
   <%= yield :head %>
+
+  <%# Aplica o estado recolhido da sidebar antes de pintar (evita "piscar") %>
+  <script>
+    (function () {
+      try {
+        if (localStorage.getItem('sidebarCollapsed') === '1')
+          document.documentElement.classList.add('sidebar-collapsed');
+      } catch (e) {}
+    })();
+  </script>
 </head>
 
 <body class="bg-[#0a0a0a] text-white min-h-screen">