asdasd

partials/structure/layout_end.php

@@ -1,8 +1,9 @@
-      </main>
+        </main>
-      <footer class="site-footer">
+        <footer class="site-footer">
-        <div class="footer-left">© <?= date('Y') ?> Nexus</div>
+          <div class="footer-left">© <?= date('Y') ?> Nexus</div>
-        <div class="footer-right">Security first · Internal only</div>
+          <div class="footer-right">Security first · Internal only</div>
-      </footer>
+        </footer>
+      </div>
     </div>
   </div>
   <?php asset_scripts('footer'); ?>

partials/structure/layout_start.php

@@ -61,7 +61,8 @@ if ($currentModule) {
         </div>
       </div>
     </header>
-    <aside class="app-sidebar">
+    <div class="layout-body">
+      <aside class="app-sidebar">
       <div class="brand-text"></div>
 
       <button class="sidebar-toggle" data-sidebar-toggle aria-label="Menü ein-/ausklappen">
@@ -82,22 +83,22 @@ if ($currentModule) {
         <a href="/users" class="nav-link <?= $path === '/users' ? 'is-active' : '' ?>">User</a>
         <a href="/settings" class="nav-link <?= $path === '/settings' ? 'is-active' : '' ?>">Einstellungen</a>
       </nav>
-    </aside>
+      </aside>
 
-    <div class="app-content">
+      <div class="app-content">
-      <button class="floating-toggle" data-sidebar-toggle aria-label="Menü einblenden">»»</button>
+        <button class="floating-toggle" data-sidebar-toggle aria-label="Menü einblenden">»»</button>
 
-      <?php if ($moduleMenu): ?>
+        <?php if ($moduleMenu): ?>
-        <div class="module-subnav">
+          <div class="module-subnav">
-          <?php foreach ($moduleMenu as $entry): ?>
+            <?php foreach ($moduleMenu as $entry): ?>
-            <a class="nav-link" href="<?= e($entry['href'] ?? '#') ?>">
+              <a class="nav-link" href="<?= e($entry['href'] ?? '#') ?>">
-              <?= e($entry['label'] ?? 'Link') ?>
+                <?= e($entry['label'] ?? 'Link') ?>
-            </a>
+              </a>
-          <?php endforeach; ?>
+            <?php endforeach; ?>
-        </div>
+          </div>
-      <?php endif; ?>
+        <?php endif; ?>
 
-      <main class="site-main">
+        <main class="site-main">
         <?php if (defined('APP_DEBUG_TOOL') && APP_DEBUG_TOOL): ?>
           <a class="debug-fab" href="/debug" title="Debug">
             🐞

public/assets/css/app.css

@@ -77,9 +77,9 @@ body {
   z-index: 1;
   min-height: 100vh;
   display: grid;
-  grid-template-columns: 260px 1fr;
+  grid-template-columns: 1fr;
-  gap: 24px;
+  gap: 14px;
-  padding: 24px;
+  padding: 18px 24px 24px;
 }
 
 .app-sidebar {
@@ -92,8 +92,12 @@ body {
   flex-direction: column;
   gap: 18px;
   position: sticky;
-  top: 24px;
+  top: 110px;
   height: fit-content;
+  transform: translateX(-12px);
+  opacity: 0;
+  pointer-events: none;
+  transition: transform 260ms ease, opacity 260ms ease;
 }
 
 .sidebar-toggle {
@@ -124,22 +128,15 @@ body {
   z-index: 60;
 }
 
-.sidebar-collapsed .app-shell {
+.layout-body.sidebar-open .app-sidebar {
-  grid-template-columns: 1fr;
+  transform: translateX(0);
+  opacity: 1;
+  pointer-events: auto;
 }
-.sidebar-collapsed .app-sidebar {
+.layout-body.sidebar-open .app-content {
-  width: 0;
+  transition: transform 260ms ease;
-  padding: 0;
-  border: none;
-  box-shadow: none;
-  background: transparent;
-}
-.sidebar-collapsed .app-sidebar * {
-  display: none;
-}
-.sidebar-collapsed .sidebar-toggle {
-  display: none;
 }
+
 .sidebar-collapsed .floating-toggle {
   display: inline-flex;
 }
@@ -218,6 +215,16 @@ body {
   gap: 16px;
 }
 
+.layout-body {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  transition: grid-template-columns 260ms ease;
+}
+.layout-body.sidebar-open {
+  grid-template-columns: 260px 1fr;
+}
+
 .topbar {
   position: sticky;
   top: 0;
@@ -227,13 +234,13 @@ body {
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: 18px;
-  padding: 10px 18px;
+  padding: 6px 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   box-shadow: var(--shadow);
-  min-height: 96px;
+  min-height: 88px;
 }
 .topbar { position: relative; }
 .topbar::after {

public/assets/js/app.js

@@ -1,14 +1,21 @@
 (() => {
   const toggles = document.querySelectorAll('[data-sidebar-toggle]');
+  const layout = document.querySelector('.layout-body');
   toggles.forEach((toggle) => {
     toggle.addEventListener('click', () => {
       document.body.classList.toggle('sidebar-collapsed');
-      localStorage.setItem('sidebar-collapsed', document.body.classList.contains('sidebar-collapsed') ? '1' : '0');
+      layout?.classList.toggle('sidebar-open');
+      const collapsed = document.body.classList.contains('sidebar-collapsed');
+      localStorage.setItem('sidebar-collapsed', collapsed ? '1' : '0');
     });
   });
 
   const saved = localStorage.getItem('sidebar-collapsed');
-  if (saved === null || saved === '1') {
+  const collapsed = (saved === null || saved === '1');
+  if (collapsed) {
     document.body.classList.add('sidebar-collapsed');
+    layout?.classList.remove('sidebar-open');
+  } else {
+    layout?.classList.add('sidebar-open');
   }
 })();