sticky sidebar

templates/index.html

@@ -15,12 +15,13 @@
             background-color: #f0f0f0;
             display: flex;
             flex-direction: row;
-            height: 100dvh;
+            min-height: 100vh;
         }
 
         .main-content {
           flex-grow: 1;
           padding: 20px;
+          overflow-y: auto;
         }
         .grid-container {
             display: grid;
@@ -95,15 +96,14 @@
         }
 
         .sidebar {
-            min-width: 20rem;
+            width: 20rem;
             background-color: #f0f0f0;
             padding: 20px;
             box-sizing: border-box;
             position: sticky;
             top: 0;
             height: 100vh;
-            overflow: hidden;
-
+            overflow-y: auto;
             display: flex;
             flex-direction: column;
             justify-content: space-between;
@@ -160,6 +160,7 @@
                 height: auto;
                 position: static;
                 padding: 10px;
+                overflow-y: visible;
             }
             .sidebar-nav ul {
                 display: none;
@@ -179,10 +180,7 @@
             <div class="nav-toggle">☰</div>
             <nav>
                 <ul>
-                    <li><a href="#">Home</a></li>
-                    <li><a href="#">About</a></li>
-                    <li><a href="#">Contact</a></li>
-                    <!-- divider line -->
+                    <li><a href="/">Home</a></li>
                     <li><hr></li>
                     <li>Powered by <a href="https://dws.rip">DWS</a></li>
                 </ul>