From ff9614d84c544417fef82f31a4ae3cb308ede7d4d9e2628475fce9f40c1c4b43 Mon Sep 17 00:00:00 2001
From: victor <victor@paravatti.com.br>
Date: Tue, 30 Jun 2026 17:47:36 -0300
Subject: [PATCH] =?UTF-8?q?Corre=C3=A7=C3=A3o=20=20do=20Bot=C3=A3o=20de=20?=
 =?UTF-8?q?esconderbarra=20lateral=20principal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/views/layouts/_navbar.html.erb     | 23 +++++++++++++++++++++++
 app/views/layouts/application.html.erb | 19 +++++++++++++++++++
 2 files changed, 42 insertions(+)
diff --git a/app/views/layouts/_navbar.html.erb b/app/views/layouts/_navbar.html.erb
index 6527adc..9f20246 100644
--- a/app/views/layouts/_navbar.html.erb
+++ b/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>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 5d423b9..8ac1257 100644
--- a/app/views/layouts/application.html.erb
+++ b/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">
