final fixes from Cristoph

themes/lumbung-theme/layouts/_default/baseof.html

@@ -11,6 +11,8 @@
         {{- partial "news-ticker.html" . -}}
         {{- partial "footer.html" . -}}
     </body>
+
+    <script src="{{ "js/hugotagsfilter-1.2.2.min.js" | relURL}}"></script>
     <script>
         function toggleDescription(id) {
             document.querySelector(id).classList.toggle("collapsed");
@@ -33,19 +35,84 @@
         if (document.querySelector('[aria-label="Previous"]')) {
             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(submenuLink => {
-            submenuLink.addEventListener('click', function() {
-                submenuLink.querySelector('.submenu').classList.toggle('opened')
-            })
-        })
 
         // footer random color
         var color = ['orange','green','blue'];
 		var footer = document.getElementById("footer");
 		var rand = Math.floor(Math.random() * color.length);
 		footer.classList.add(color[rand]);
+
+        // mobile menu
+        document.getElementById("menu-button").onclick=function(){
+            this.classList.toggle("active");
+            document.getElementById("menu").classList.toggle("active");
+        }
+
+        // mobile menu - submenu
+        submenuLinks = document.querySelectorAll(".has-submenu");
+        [...submenuLinks].forEach((t=>{
+            t.addEventListener("click",(function(){t.querySelector(".submenu").classList.toggle("active")}))
+        }));
+        
+        // mobile mainfilter
+        document.getElementById("filter-link").onclick=function(){document.getElementById("filter").classList.toggle("active")};
+
+        // mobile filter
+        filterButtons=document.querySelectorAll(".filter-buttons");
+        [...filterButtons].forEach((t=>{
+            t.addEventListener("click",(function(){t.querySelector(".filter-buttons-dropdown").classList.toggle("active");
+            t.querySelector(".filter-by").classList.toggle("active")}))
+        }));
+
+        // load more cards
+        document.getElementById("load-more").onclick=function(){
+            document.getElementById('load-more-paginator').click();
+        }
+        
+        // filter config
+        var htfConfig = {
+          filters: [
+            {
+              name: 'tags',
+              prefix: 'tag-',
+              buttonClass: 'tag-button',
+              allSelector: '#selectAllTags',
+              attrName: 'data-tags',
+              selectedPrefix: 'stags-',
+            },
+            {
+              name: 'section',
+              prefix: 'sect-',
+              buttonClass: 'sect-button',
+              allSelector: '#selectAllSections',
+              attrName: 'data-section',
+              selectedPrefix: 'ssect-',
+            },
+            {
+              name: 'contributors',
+              prefix: 'cont-',
+              buttonClass: 'cont-button',
+              allSelector: '#selectAllContributors',
+              attrName: 'data-contributors',
+              selectedPrefix: 'scont-',
+            },
+            {
+              name: 'sources',
+              prefix: 'src-',
+              buttonClass: 'src-button',
+              allSelector: '#selectAllSources',
+              attrName: 'data-sources',
+              selectedPrefix: 'ssrc-',
+            }
+          ],
+          showItemClass: "show-item",
+          filterItemClass: "filter-item",
+          activeButtonClass: "active",
+          counterSelector: "selectedItemCount",
+          populateCount: true,
+          setDisabledButtonClass: "disable-button"
+        } 
+        var htf = new HugoTagsFilter(htfConfig);
     </script>
 
 </html>