asdasd

public/assets/css/app.css

@@ -77,9 +77,9 @@ body {
   z-index: 1;
   min-height: 100vh;
   display: grid;
-  grid-template-columns: 260px 1fr;
-  gap: 24px;
-  padding: 24px;
+  grid-template-columns: 1fr;
+  gap: 14px;
+  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 {
-  grid-template-columns: 1fr;
+.layout-body.sidebar-open .app-sidebar {
+  transform: translateX(0);
+  opacity: 1;
+  pointer-events: auto;
 }
-.sidebar-collapsed .app-sidebar {
-  width: 0;
-  padding: 0;
-  border: none;
-  box-shadow: none;
-  background: transparent;
-}
-.sidebar-collapsed .app-sidebar * {
-  display: none;
-}
-.sidebar-collapsed .sidebar-toggle {
-  display: none;
+.layout-body.sidebar-open .app-content {
+  transition: transform 260ms ease;
 }
+
 .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');
   }
 })();