feat: responsive navbar

Author: miquigz

themes/basic/assets/css/_header.scss

@@ -24,3 +24,44 @@
     box-shadow: 1px 1px 3px #ccc;
   }
 }
+
+.menu-button {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .menu-button {
+    display: block;
+  }
+  .page-header {
+    justify-content: space-between;
+    .header-center {
+      order: -1;
+      max-width: 24px;
+      .mobile-menu {
+        z-index: 50;
+      }
+    }
+    .header-center > .nav-links {
+      background-color: #fefefe;
+      border-bottom: 1px solid #ccc;
+      border-top: 1px solid #ccc;
+      position: absolute;
+      display: flex;
+      flex-wrap: wrap;
+      top: 76px;
+      left: 0;
+      a {
+        text-align: center;
+        min-width: 28%;
+      }
+    }
+  }
+  nav.hide-on-mobile {
+    display: none !important;
+    height: 0;
+  }
+  nav.show-on-mobile {
+    display: flex !important;
+  }
+}

themes/basic/assets/js/header-mobile.js

@@ -0,0 +1,21 @@
+document.addEventListener("DOMContentLoaded", function () {
+  var menuButton = document.querySelector(".menu-button");
+  var menu = document.querySelector(".nav-links");
+
+  function hideMenu() {
+    menu.classList.add("hide-on-mobile");
+    menu.classList.remove("show-on-mobile");
+  }
+
+  menuButton.addEventListener("click", function () {
+    var displayStyle = getComputedStyle(menu).display;
+    if (displayStyle !== "none") {
+      hideMenu();
+    } else {
+      menu.classList.add("show-on-mobile");
+      menu.classList.remove("hide-on-mobile");
+    }
+  });
+
+  menu.addEventListener("click", hideMenu);
+});

themes/basic/layouts/partials/nav.html

@@ -1,8 +1,18 @@
-<nav>
+<div class="menu-button">
+    <span >
+        <img  alt="mobile menu" src="{{"img/menu.svg"|relURL}}" alt=""/>
+    </span>
+</div>
+
+<nav class="nav-links hide-on-mobile">
     <a href="/">Inicio</a>
     <a href="/biografia">Biografía</a>
     <a href="/proyectos">Proyectos</a>
     <a href="/posts">Posts</a>
     <a href="/colaboradores">Colaboradores</a>
     <a href="/contacto">Contacto</a>
 </nav>
+
+
+{{ $mobileHeader := resources.Get "js/header-mobile.js" }}
+<script src="{{ $mobileHeader.Permalink }}" defer></script>