style: responsive layout -> hide sidebar on narrow screens (#6)

renerocksai · web-flow · commit 21cde80d52de · 2024-09-18T13:11:21.000+02:00
Added mediaquery to hide sidebar on narrow screens
Also had to re-structure the grid layout in the mediaquery.
diff --git a/assets/style.css b/assets/style.css
@@ -352,3 +352,58 @@ li {
     zoom: 1.4;
   }
 }
+
+#burger-menu {
+  display: none;
+  background: none;
+  border: none;
+  color: white;
+  font-size: 1.5rem;
+  cursor: pointer;
+
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  top: 6px;
+  left: 10px;
+  z-index: 1000; /* Ensure it stays above other elements */
+}
+
+/* Show the burger menu only on small screens */
+@media screen and (max-width: 800px) {
+  #burger-menu {
+    display: inline-block;
+  }
+
+  #menu {
+      margin-left: 40px;
+      width: 85%;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  #sidebar, #logo {
+    display: none; /* Hide sidebar and logo by default */
+  }
+
+  body {
+    grid-template-columns: 1fr; /* Single column layout by default */
+    grid-template-areas:
+      "menu"
+      "content"
+      "footer"; /* Simple grid layout */
+  }
+
+  /* When the sidebar and logo are shown (burger menu active) */
+  body.show-sidebar {
+    grid-template-columns: 250px auto; /* Two columns: sidebar + content */
+    grid-template-areas:
+      "logo menu"
+      "side content"
+      "footer footer"; /* Restore the two-column layout */
+  }
+
+  #sidebar.active, #logo.active {
+    display: block; /* Show sidebar and logo when 'active' */
+  }
+}
diff --git a/layouts/templates/base.shtml b/layouts/templates/base.shtml
@@ -26,6 +26,9 @@
   <body>
     <a id="logo" href="/"></a>
     <nav id="menu">
+      <!-- burger menu -->
+      <button id="burger-menu" aria-label="Toggle Menu">&#9776;</button> <!-- Burger menu icon -->
+
       <a href="/">Home</a>
       •
       <a href="$site.page('tutorials/getting_started').link()">Quickstart</a>
@@ -41,6 +44,8 @@
       <a href="https://github.com/zml/zml" target="_blank">Code</a>
       •
       <a href="https://discord.gg/6y72SN2E7H" target="_blank">Discord</a>
+
+
     </nav>
     <!-- <hr style="width:min(600px, 100vw); border-color:#0798b3; color: white; border-top:1px;"> -->
     <aside id="sidebar" class="sidebar">
@@ -75,5 +80,21 @@
         <!-- OPTION 2: ZML only -->
         <!-- &copy; in 2024 by <a href="https://zml.ai" target="_blank">ZML.ai</a> -->
     </footer>
+
+  <!-- burger menu script -->
+  <script>
+      document.getElementById('burger-menu').addEventListener('click', function() {
+        const sidebar = document.getElementById('sidebar');
+        const logo = document.getElementById('logo');
+        const body = document.body;
+
+        // Toggle the 'active' class on sidebar and logo to show/hide them
+        sidebar.classList.toggle('active');
+        logo.classList.toggle('active');
+        
+        // Toggle the 'show-sidebar' class on the body to adjust the grid layout
+        body.classList.toggle('show-sidebar');
+      });
+</script>
   </body>
 </html>
