victor/Reem-Notas
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
victor
2026-06-30 17:47:36 -03:00
parent 8ab2f8e72a
commit ff9614d84c
2 changed files with 42 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/views/layouts/_navbar.html.erb
View File

@@ -71,6 +71,15 @@
</div> </div>
</aside> </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 %> <%# 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"> <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()" <button onclick="toggleSidebar()"
@@ -86,10 +95,24 @@
<div class="h-14 md:hidden"></div> <div class="h-14 md:hidden"></div>
<script> <script>
// Mobile: abre/fecha a sidebar por cima do conteúdo (hamburguer).
function toggleSidebar() { function toggleSidebar() {
const s = document.getElementById('sidebar'); const s = document.getElementById('sidebar');
const o = document.getElementById('sidebar-overlay'); const o = document.getElementById('sidebar-overlay');
s.classList.toggle('-translate-x-full'); s.classList.toggle('-translate-x-full');
o.classList.toggle('hidden'); 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> </script>

19
app/views/layouts/application.html.erb
View File

@@ -55,10 +55,29 @@
animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite;
} }
@keyframes spin { to { transform: rotate(360deg); } } @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> </style>
<%= javascript_importmap_tags %> <%= javascript_importmap_tags %>
<%= yield :head %> <%= 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> </head>
<body class="bg-[#0a0a0a] text-white min-h-screen"> <body class="bg-[#0a0a0a] text-white min-h-screen">