From 32141d8e968c18cba44f87c3429288d98b6e8597 Mon Sep 17 00:00:00 2001
From: Franciszek Stachura <fbstachura@gmail.com>
Date: Fri, 20 Sep 2024 15:11:39 +0200
Subject: [PATCH] web: Fix mobile sidebar close with backdrop click

---
 static/script.js      | 7 +++----
 templates/layout.html | 9 ++++++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/static/script.js b/static/script.js
index 3510d61..b78fc5e 100644
--- a/static/script.js
+++ b/static/script.js
@@ -77,8 +77,7 @@ var openMenu = document.querySelector('.open-menu')
 var wrapper = document.querySelector('.wrapper')
 openMenu.onclick = tag.onclick = function (e) {
   e.preventDefault();
-  const isWidescreen = getComputedStyle(document.documentElement).getPropertyValue('--is-widescreen') === 'true';
-  if(isWidescreen) {
+  if (isWidescreen()) {
     const hasShowMenu = document.documentElement.classList.contains('show-menu');
     window.localStorage.setItem('show-sidebar', !hasShowMenu);
     document.documentElement.classList.toggle('show-menu');
@@ -87,10 +86,10 @@ openMenu.onclick = tag.onclick = function (e) {
   }
 }
 sidebar.onclick = function (e) {
-  if (e.target === this) {
+  if (e.target === this && isWidescreen()) {
     document.documentElement.classList.remove('show-menu');
     window.localStorage.setItem('show-sidebar', false);
-  } else if (e.target.classList.contains('close-menu')) {
+  } else if (e.target === this || e.target.classList.contains('close-menu')) {
     document.documentElement.classList.remove('show-menu-mobile');
   }
 }
diff --git a/templates/layout.html b/templates/layout.html
index e3cb130..99f0541 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -21,11 +21,14 @@
             document.documentElement.classList.remove('no-js');
             document.documentElement.classList.add('js');
 
+            function isWidescreen() {
+              return getComputedStyle(document.documentElement).getPropertyValue('--is-widescreen') === 'true';
+            }
+
             //NOTE: placing this here, instead of script.js makes the sidebar less likely to flash on navigation
             const showSidebarStr = window.localStorage.getItem('show-sidebar');
             const showSidebar = showSidebarStr == "true" || showSidebarStr == null;
-            const isWidescreen = getComputedStyle(document.documentElement).getPropertyValue('--is-widescreen') === 'true';
-            if (isWidescreen && showSidebar) {
+            if (isWidescreen() && showSidebar) {
               // special class that opens the sidebar only on widescreen devices
               document.documentElement.classList.add('show-menu');
             }
@@ -62,7 +65,7 @@
                 <span class="poweredby">powered by <a target="_blank" href="https://github.com/bootlin/elixir">Elixir 2.2</a></span>
             </footer>
         </div>
-        <script src="/static/script.js?v=9"></script>
+        <script src="/static/script.js?v=10"></script>
         <script src="/static/dynamic-references.js?v=4"></script>
         <script src="/static/autocomplete.js" project="{{ current_project }}"></script>
     </body>