chiusura menu meglio

themes/maya0x17/static/ruotalogo.js

@@ -6,9 +6,11 @@ function menu_is_shown() {
 }
 function menu_hide() {
   menu_get().style.display = 'none'
+  document.querySelector('#overlay').style.height = '0'
 }
 function menu_show() {
   menu_get().style.display = 'block'
+  document.querySelector('#overlay').style.height = '100%'
 }
 document.addEventListener('DOMContentLoaded', function() {
   var logo = document.getElementById('logo-img')
@@ -37,29 +39,17 @@ document.addEventListener('DOMContentLoaded', function() {
   }
   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
-    }
+  document.querySelector('#overlay').addEventListener('click', function (evt) {
     menu_hide()
-    evt.stopPropagation()
   })
 })

themes/maya0x17/static/theme.scss

@@ -89,6 +89,7 @@ h1 > (a, a:focus, a:active) { color: $c-titles; }
 #menu-row {
     display: none;
     position: fixed;
+    z-index: 20;
     top: 3em;
     left: 8vw;
     background: $c-bg-menu; 
@@ -154,3 +155,15 @@ code {
     border: 1px solid #888;
     border-radius: 0.4em;
 }
+#overlay {
+    display: block;
+    position: fixed;
+    left: 0;
+    top: 0;
+    background-color: rgba(0,0,0,0.5);
+    overflow-x: hidden;
+    transition: 0.3s;
+    width: 100%;
+    height: 0;
+    z-index: 3;
+}

themes/maya0x17/templates/base.html

@@ -68,6 +68,7 @@
                 </div><!-- content column -->
             </div>
         </div>
+        <div id="overlay"></div>
         <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/ruotalogo.js"></script>
     </body>
 </html>