chiudi menu cliccando fuori

themes/maya0x17/static/ruotalogo.js

@@ -1,41 +1,65 @@
+function menu_get() {
+    return document.querySelector('#menu-row')
+}
+function menu_is_shown() {
+    return (window.getComputedStyle(menu_get()).display !== 'none')
+}
+function menu_hide() {
+  menu_get().style.display = 'none'
+}
+function menu_show() {
+  menu_get().style.display = 'block'
+}
 document.addEventListener('DOMContentLoaded', function() {
-    var logo = document.getElementById('logo-img')
+  var logo = document.getElementById('logo-img')
-    logo.classList.add('rotate')
+  logo.classList.add('rotate')
-    function ruotaLogo() {
+  function ruotaLogo() {
-        logo.style.transform = 'rotate(' + window.pageYOffset/2+'deg)'
+    logo.style.transform = 'rotate(' + window.pageYOffset/2+'deg)'
-    }
+  }
-    function scrollSetup() {
+  function scrollSetup() {
-        "use strict";
+    "use strict";
-        var last_known_scroll_position = 0
+    var last_known_scroll_position = 0
-        var ticking = false
+    var ticking = false
 
-        window.addEventListener('scroll', function (e) {
+    window.addEventListener('scroll', function (e) {
-            last_known_scroll_position = window.scrollY
+      last_known_scroll_position = window.scrollY
 
-            if (!ticking) {
+      if (!ticking) {
-                window.requestAnimationFrame(function () {
+        window.requestAnimationFrame(function () {
 
-                    ruotaLogo()
+          ruotaLogo()
-                    ticking = false;
+          ticking = false;
-                });
+        });
 
-                ticking = true;
+        ticking = true;
-            }
+      }
-        })
-    }
-    setTimeout(function () {
-        logo.classList.remove('rotate')
-        //ruotaLogo()
-        scrollSetup()
-    }, 1000)
-    logo.addEventListener('click', function () {
-        var menu = document.querySelector('#menu-row')
-        if (window.getComputedStyle(menu).display === 'none') {
-            menu.style.display = 'block'
-            // menu.scrollIntoView()
-        } else {
-            menu.style.display = 'none'
-        }
-        console.log('cliccato')
     })
+  }
+  setTimeout(function () {
+    logo.classList.remove('rotate')
+    //ruotaLogo()
+    scrollSetup()
+  }, 1000)
+  logo.addEventListener('click', function (evt) {
+    if (!menu_is_shown()) {
+      console.log('show')
+      menu_show()
+      // menu.scrollIntoView()
+    } else {
+      menu_hide()
+    }
+    console.log('cliccato')
+    evt.stopPropagation()
+  })
+  document.querySelector('#menu-row').addEventListener('click', function(evt) {
+    evt.stopPropagation()
+  })
+
+  document.body.addEventListener('click', function (evt) {
+    if (!menu_is_shown()) {
+      return
+    }
+    menu_hide()
+    evt.stopPropagation()
+  })
 })

themes/maya0x17/static/theme.scss

@@ -89,7 +89,7 @@ h1 > (a, a:focus, a:active) { color: $c-titles; }
 #menu-row {
     display: none;
     position: fixed;
-    top: 0px;
+    top: 3em;
     left: 8vw;
     background: $c-bg-menu; 
     width: 89vw;