Merge pull request #35 from miquigz/navbarresponsive#22

feat: responsive navbar #22

Author: ThiagoMowszet

themes/basic/assets/css/_header.scss

@@ -24,3 +24,57 @@
     box-shadow: 1px 1px 3px #ccc;
   }
 }
+
+.menu-button {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .menu-button {
+    display: block;
+  }
+  nav.show-on-mobile.nav-links > a {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .menu-button:hover {
+    cursor: pointer;
+  }
+
+  .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;
+      width: 100%;
+      flex-wrap: wrap;
+      top: 76px;
+      left: 0;
+      a {
+        text-align: center;
+        min-width: 33%;
+      }
+    }
+  }
+  nav.hide-on-mobile {
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition: opacity 0.5s;
+  }
+  nav.show-on-mobile {
+    opacity: 1;
+    max-height: 348px;
+    transition: opacity 0.5s ease;
+  }
+}

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 () {
+    let menuClass = menu.classList;
+    if (menuClass.contains("show-on-mobile")) {
+      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>