diff --git a/partials/structure/layout_start.php b/partials/structure/layout_start.php index 579bff5..a9cc4b4 100755 --- a/partials/structure/layout_start.php +++ b/partials/structure/layout_start.php @@ -85,6 +85,7 @@ if ($currentModule) {
+
diff --git a/public/assets/css/app.css b/public/assets/css/app.css index 82e4b6b..fb9a337 100644 --- a/public/assets/css/app.css +++ b/public/assets/css/app.css @@ -107,22 +107,41 @@ body { } .sidebar-collapse { display: none; } +.floating-toggle { + display: none; + position: fixed; + left: 24px; + bottom: 24px; + width: 52px; + height: 52px; + border-radius: 50%; + background: var(--panel); + border: 1px solid var(--line); + box-shadow: var(--shadow); + align-items: center; + justify-content: center; + font-weight: 800; + z-index: 60; +} + .sidebar-collapsed .app-shell { - grid-template-columns: 72px 1fr; + grid-template-columns: 1fr; } -.sidebar-collapsed .sidebar-toggle { - padding: 6px 8px; - font-size: 14px; +.sidebar-collapsed .app-sidebar { + width: 0; + padding: 0; + border: none; + box-shadow: none; + background: transparent; } -.sidebar-collapsed .sidebar-icon { display: none; } -.sidebar-collapsed .sidebar-collapse { display: inline; } -.sidebar-collapsed .app-sidebar .brand-text, -.sidebar-collapsed .app-sidebar .nav-section, -.sidebar-collapsed .app-sidebar .nav-link { +.sidebar-collapsed .app-sidebar * { display: none; } -.sidebar-collapsed .app-sidebar .brand img { - height: 36px; +.sidebar-collapsed .sidebar-toggle { + display: none; +} +.sidebar-collapsed .floating-toggle { + display: inline-flex; } .brand { @@ -131,7 +150,7 @@ body { gap: 14px; } .topbar-logo { - height: 40px; + height: 80px; width: auto; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.12)); margin-right: 10px; @@ -214,9 +233,17 @@ body { justify-content: space-between; gap: 16px; box-shadow: var(--shadow); - min-height: 64px; + min-height: 96px; } .topbar { position: relative; } +.topbar::after { + content: ""; + position: absolute; + inset: 0; + border-radius: 18px; + box-shadow: 0 18px 30px rgba(22, 32, 74, 0.12); + pointer-events: none; +} .page-title { margin: 0; font-size: 1.25rem; diff --git a/public/assets/js/app.js b/public/assets/js/app.js index 4823835..0418c8a 100755 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -1,13 +1,14 @@ (() => { - const toggle = document.querySelector('[data-sidebar-toggle]'); - if (toggle) { + const toggles = document.querySelectorAll('[data-sidebar-toggle]'); + toggles.forEach((toggle) => { toggle.addEventListener('click', () => { document.body.classList.toggle('sidebar-collapsed'); localStorage.setItem('sidebar-collapsed', document.body.classList.contains('sidebar-collapsed') ? '1' : '0'); }); - } + }); - if (localStorage.getItem('sidebar-collapsed') === '1') { + const saved = localStorage.getItem('sidebar-collapsed'); + if (saved === null || saved === '1') { document.body.classList.add('sidebar-collapsed'); } })();