boban
/
nimuli
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
boban 2026-05-17 12:56:41 +02:00
parent 0a08d0f268
commit 3897d54ba3
2 changed files with 3 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/bootstrap.js
View File

@ -68,9 +68,11 @@ document.addEventListener('alpine:init', () => {
this.isCollapsed = this.collapsed && ! this.isMobile; this.isCollapsed = this.collapsed && ! this.isMobile;
this._syncDataset(); this._syncDataset();
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
const wasMobile = this.isMobile;
this.isMobile = window.innerWidth < 768; this.isMobile = window.innerWidth < 768;
this.isCollapsed = this.collapsed && ! this.isMobile; this.isCollapsed = this.collapsed && ! this.isMobile;
this._syncDataset(); this._syncDataset();
if (this.isMobile && ! wasMobile) { this.mobileOpen = false; }
}); });
}, },
_syncDataset() { _syncDataset() {

2
resources/views/layouts/nimuli-app.blade.php
View File

@ -89,10 +89,10 @@
} }
html[data-sidebar-collapsed] .skel-sidebar { width: 64px; } html[data-sidebar-collapsed] .skel-sidebar { width: 64px; }
html[data-sidebar-collapsed] .skel-topbar { left: 64px; } html[data-sidebar-collapsed] .skel-topbar { left: 64px; }
.sidebar-aside { width: 15rem; }
@media (min-width: 768px) { @media (min-width: 768px) {
.nim-content { margin-left: 210px; } .nim-content { margin-left: 210px; }
html[data-sidebar-collapsed] .nim-content { margin-left: 55px; } html[data-sidebar-collapsed] .nim-content { margin-left: 55px; }
.sidebar-aside { width: 15rem; }
html[data-sidebar-collapsed] .sidebar-aside { width: 4rem; } html[data-sidebar-collapsed] .sidebar-aside { width: 4rem; }
} }
body.app-ready .app-spinner, body.app-ready .app-spinner,