Better burger menu

themes/datacoop2020/assets/static/css/style.scss

@@ -51,6 +51,8 @@
     --bg-color          : #fff;
     --alt-bg-color      : #a8f3f4;
     --bar-color         : #f0dcac;
+
+    --burger_size       : 56px;
 }
 
 body {
@@ -172,6 +174,11 @@ aside nav footer ol li a {
     font-size           : 1.65rem;
 }
 
+aside header a img {
+    width               : 100%;
+    height              : 140px;
+}
+
 @media(max-width:1000px) {
     :root {
         --base-grid         : 40px;
@@ -216,5 +223,42 @@ aside nav footer ol li a {
         padding             : 1.5rem 0;
         font-size           : 3rem;
     }
+
+    header .nav-toggle {
+        cursor : pointer;
+        display : block;
+        height : var(--burger_size);
+        float : right;
+        margin : 40px 20px;
+    }
+
+    header .nav-toggle span {
+        display : block;
+        height : calc( ( var(--burger_size) / 3 ) / 2 );
+        width : var(--burger_size);
+        background : var(--text-color);
+        margin-bottom : calc( ( var(--burger_size) / 3 ) / 2 );
+    }
+
+    header .nav-toggle span {
+        position : relative;
+        top : 0;
+        transition : all 0.4s;
+    }
+
+    header .nav-toggle.display span#nav-toggle-b {
+        opacity : 0;
+    }
+
+    header .nav-toggle.display span#nav-toggle-a {
+        transform : rotate(45deg); 
+        top : calc( var(--burger_size) / 3 );
+        
+    }
+
+    header .nav-toggle.display span#nav-toggle-c {
+        transform : rotate(-45deg); 
+        top : calc( ( var(--burger_size) / 3 ) * -1 );
+    }
 }
 

themes/datacoop2020/layouts/_default/baseof.html

@@ -7,8 +7,12 @@
 
   <aside>
       <header>
-          <a href="index.html"><img src="{{ printf "/static/img/logo_%s.svg" .Site.Language.Lang | absURL }}" alt="data coop logo"></a>
-          <button id="menu-toggle">☰</button>
+          <a href="index.html"><img src="{{ printf "/static/img/logo_%s.svg" .Site.Language.Lang | absURL }}" alt="data coop logo" width="240" height="140"></a>
+        <div class="nav-toggle" id="nav-toggle-header">
+            <span id="nav-toggle-a"></span> 
+            <span id="nav-toggle-b"></span> 
+            <span id="nav-toggle-c"></span> 
+        </div>
       </header>
        {{ partial "nav.html" . }}
 
@@ -22,12 +26,19 @@
 
 
         <script>
-      document.getElementById("menu-toggle").addEventListener("click", function() {
-          let d = document.getElementsByTagName("nav")[0];
-          let is_showing = (d.style.display == 'block');
-          d.style.display = is_showing ? 'none' : 'block';
-          document.getElementById("menu-toggle").innerHTML = is_showing ? '☰' : 'X' ;
-      });
+            var menu = document.getElementById("nav-toggle-header")
+
+            function toggleMenu() {
+                if ( menu.classList.contains("display") ) {
+                    menu.classList.remove("display")
+                    document.getElementsByTagName('nav')[0].style.display='none'
+                } else {
+                    menu.classList.add("display")
+                    document.getElementsByTagName('nav')[0].style.display='block'
+                }
+            }
+
+            menu.addEventListener( "click", toggleMenu )
         </script>
         
 </body>