From 453b26f041b4b9e8bdd9e8f3a67238396afede7e Mon Sep 17 00:00:00 2001
From: Aadil Ayub <aadilayub@protonmail.com>
Date: Wed, 13 Apr 2022 12:21:20 +0500
Subject: [PATCH] make sub-menus toggle-able in mobile navigation drawer

---
 themes/lumbung-theme/layouts/_default/baseof.html |  8 ++++++++
 themes/lumbung-theme/static/css/main.css          | 14 +++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/themes/lumbung-theme/layouts/_default/baseof.html b/themes/lumbung-theme/layouts/_default/baseof.html
index 6f841b4..91bfcca 100644
--- a/themes/lumbung-theme/layouts/_default/baseof.html
+++ b/themes/lumbung-theme/layouts/_default/baseof.html
@@ -28,6 +28,14 @@
             document.querySelector('#thumb-'+ id).remove();
         }
         document.querySelector('[aria-label="Previous"]').parentElement.classList.add('previous-page-link')
+
+        // for toggling submenus in mobile navigation drawer
+        let submenuLinks = document.querySelectorAll('.drawer .has-submenu');
+        [...submenuLinks].forEach(function(submenuLink) {
+            submenuLink.addEventListener('click', () => {
+                submenuLink.querySelector('.submenu').classList.toggle('opened')
+            })
+        })
     </script>
 
 </html>
diff --git a/themes/lumbung-theme/static/css/main.css b/themes/lumbung-theme/static/css/main.css
index 1274075..9e4df88 100644
--- a/themes/lumbung-theme/static/css/main.css
+++ b/themes/lumbung-theme/static/css/main.css
@@ -255,7 +255,12 @@ body {
 }
 
 #top-menu .drawer .submenu {
-    visibility: hidden;
+    position: initial;
+    display: none;
+}
+
+#top-menu .drawer .submenu.opened {
+    display: flex;
 }
 
 #top-menu .drawer .submenu li {
@@ -270,6 +275,9 @@ body {
 .drawer .has-submenu {
     padding-left: 1em;
     margin-left: 5px;
+    color: #333;
+    display: flex;
+    flex-direction: column;
 }
 
 
@@ -870,6 +878,10 @@ footer a:hover {
         padding: 0;
     }
 
+    #top-menu ul.submenu {
+        position: initial;
+    }
+
     .drawer ul li {
         padding: 1em 0;
         /* border-bottom: 1px solid #333; */