Refactor topnav/sidebar to not use hardcoded heights.

- Topnav can have any height now and sidebar and <main> content's top spacing
  readjusts naturally.
- position: fixed and hardcoded heights/margin/padding are removed.

Author: knadh

src/css/sidebar.css

@@ -1,30 +1,20 @@
 @layer components {
   [data-sidebar-layout] {
-    --topnav-offset: 0px;
-
     display: grid;
     grid-template-columns: 14rem 1fr;
-    min-height: 100dvh;
-    gap: var(--space-4);
+    grid-template-rows: auto 1fr;
+    height: 100dvh;
 
     > main {
+      grid-row: 2;
       min-width: 0;
-    }
-
-    &:has(nav[data-topnav]) {
-      --topnav-offset: var(--space-12);
-
-      > main [id] {
-        scroll-margin-block-start: calc(var(--space-12) + var(--space-6));
-      }
+      overflow-y: auto;
     }
 
     > aside[data-sidebar] {
-      position: sticky;
-      top: var(--topnav-offset);
+      grid-row: 2;
+      min-height: 0;
       z-index: 1;
-      height: calc(100dvh - var(--topnav-offset));
-      align-self: start;
       background-color: var(--background);
       border-inline-end: 1px solid var(--border);
       box-shadow: var(--shadow-medium);
@@ -96,13 +86,16 @@
         }
       }
     }
+
+    > nav[data-topnav] {
+      grid-column: 1 / -1;
+    }
   }
 
   nav[data-topnav] {
-    position: fixed;
-    inset: 0 0 auto;
+    position: sticky;
+    top: 0;
     z-index: 5;
-    min-height: var(--space-12);
     display: flex;
     align-items: center;
     gap: var(--space-3);
@@ -116,10 +109,6 @@
     }
   }
 
-  nav[data-topnav] ~ main {
-    margin-block-start: var(--space-12);
-  }
-
   :is([data-sidebar-toggle], [data-sidebar-header]) {
     display: none;
   }
@@ -165,9 +154,13 @@
     [data-sidebar-layout] {
       grid-template-columns: 1fr;
 
+      > main {
+        grid-column: 1;
+      }
+
       > aside[data-sidebar] {
-        position: fixed;
-        left: 0;
+        grid-column: 1;
+        z-index: 2;
         width: 16rem;
         transform: translateX(-100%);
         transition: transform var(--transition);