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 agora mostrando o botão quando se passa o mouse

Browse Source
This commit is contained in:
victor
2026-06-30 17:57:29 -03:00
parent ff9614d84c
commit 96d01aa52a
3 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -71,14 +71,17 @@
</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>
<%# Botão flutuante (desktop) — esconde/mostra a sidebar do site inteiro.
Fica invisível e só aparece quando o mouse chega perto (zona de hover). %>
<div id="sidebar-edge" class="hidden md:flex group fixed top-1/2 -translate-y-1/2 z-40 h-32 w-12 items-center">
<button id="sidebar-toggle-btn" type="button" onclick="toggleSidebarCollapse()"
class="flex 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
opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity duration-200"
title="Esconder/mostrar menu" aria-label="Esconder ou mostrar o menu">
<span id="sidebar-toggle-icon" class="text-lg leading-none">◀</span>
</button>
</div>
<%# 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">

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

@@ -59,10 +59,10 @@
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-edge { 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; }
.sidebar-collapsed #sidebar-edge { left: 0; }
}
</style>