fix: md resolution navbar

Author: miquigz

themes/basic/assets/css/_header.scss

@@ -33,6 +33,14 @@
   .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 {
@@ -48,20 +56,25 @@
       border-top: 1px solid #ccc;
       position: absolute;
       display: flex;
+      width: 100%;
       flex-wrap: wrap;
       top: 76px;
       left: 0;
       a {
         text-align: center;
-        min-width: 28%;
+        min-width: 33%;
       }
     }
   }
   nav.hide-on-mobile {
-    display: none !important;
-    height: 0;
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition: opacity 0.5s;
   }
   nav.show-on-mobile {
-    display: flex !important;
+    opacity: 1;
+    max-height: 348px;
+    transition: opacity 0.5s ease;
   }
 }

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

@@ -8,8 +8,8 @@ document.addEventListener("DOMContentLoaded", function () {
   }
 
   menuButton.addEventListener("click", function () {
-    var displayStyle = getComputedStyle(menu).display;
-    if (displayStyle !== "none") {
+    let menuClass = menu.classList;
+    if (menuClass.contains("show-on-mobile")) {
       hideMenu();
     } else {
       menu.classList.add("show-on-mobile");