mgonzalez/project.linkedcorp.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: version 2.4.0 -- menu lateral como drawer en celular

Browse Source 
En pantallas angostas (<=768px) el sidebar arranca oculto y se abre
como panel superpuesto desde el boton de hamburguesa, con fondo
oscuro detras y cierre automatico al navegar o tocar afuera. El
escritorio no se toca: sigue igual que siempre.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Milton Gonzalez
2026-09-22 13:20:30 -05:00
parent ea0feb7e3a
commit 9b20f85ae0
7 changed files with 61 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/app.css
+27
View File
@@ -73,6 +73,33 @@ button { font-family: inherit; }
.nav-logo-icon-header { width: 72px; height: 72px; flex: none; object-fit: contain; }
.nav-logo-full-header { height: 64px; width: auto; max-width: 100%; object-fit: contain; }
/* --- Menu lateral en celular: todo lo de acá abajo es exclusivo de pantallas angostas, no
toca nada del layout de escritorio (que sigue con el sidebar fijo de siempre). --- */
.nav-backdrop { display: none; }
@media (max-width: 768px) {
.nav-view, .nav-view.compact, .nav-view.expanded {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 260px;
z-index: 60;
transform: translateX(-100%);
transition: transform .2s ease;
box-shadow: 4px 0 20px rgb(0 0 0 / .4);
}
.nav-view.mobile-open { transform: translateX(0); }
.nav-backdrop {
display: block;
position: fixed; inset: 0;
background: rgb(0 0 0 / .5);
z-index: 55;
opacity: 0; pointer-events: none;
transition: opacity .2s ease;
}
.nav-backdrop.visible { opacity: 1; pointer-events: auto; }
}
.content-column { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
height: 84px; flex: none; display: flex; align-items: center; justify-content: space-between;