fix(bug-2): sidebar-aside base width outside media query + auto-close on mobile
- Move .sidebar-aside{width:15rem} outside @media min-width:768px so mobile
gets explicit width — without it -translate-x-full translates 0px and
sidebar content bleeds visible (Collapse text, logout icon)
- Resize handler: auto-close mobileOpen when crossing to mobile viewport
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
main
parent
0a08d0f268
commit
3897d54ba3
|
|
@ -68,9 +68,11 @@ document.addEventListener('alpine:init', () => {
|
|||
this.isCollapsed = this.collapsed && ! this.isMobile;
|
||||
this._syncDataset();
|
||||
window.addEventListener('resize', () => {
|
||||
const wasMobile = this.isMobile;
|
||||
this.isMobile = window.innerWidth < 768;
|
||||
this.isCollapsed = this.collapsed && ! this.isMobile;
|
||||
this._syncDataset();
|
||||
if (this.isMobile && ! wasMobile) { this.mobileOpen = false; }
|
||||
});
|
||||
},
|
||||
_syncDataset() {
|
||||
|
|
|
|||
|
|
@ -89,10 +89,10 @@
|
|||
}
|
||||
html[data-sidebar-collapsed] .skel-sidebar { width: 64px; }
|
||||
html[data-sidebar-collapsed] .skel-topbar { left: 64px; }
|
||||
.sidebar-aside { width: 15rem; }
|
||||
@media (min-width: 768px) {
|
||||
.nim-content { margin-left: 210px; }
|
||||
html[data-sidebar-collapsed] .nim-content { margin-left: 55px; }
|
||||
.sidebar-aside { width: 15rem; }
|
||||
html[data-sidebar-collapsed] .sidebar-aside { width: 4rem; }
|
||||
}
|
||||
body.app-ready .app-spinner,
|
||||
|
|
|
|||
Loading…
Reference in New Issue