wip: Re-write script to data attr because conflicts with docsify menu plugin

Author: sgurin

html/assets/css/themeable-customization.css

@@ -18,11 +18,16 @@
   background-color: #fff;
 }
 
-.sidebar-nav ul > li.collapse > a {
-  color: var(--sidebar-nav-link-color);
-  background: var(--sidebar-nav-pagelink-background) !important;
+[data-submenu-state="collapsed"] > ul {
+  display: none;
 }
-.sidebar-nav ul > li.collapse.active > a {
-  color: var(--sidebar-nav-link-color--active, var(--sidebar-nav-link-color));
-  background: var(--sidebar-nav-pagelink-background--active) !important;
+.sidebar-nav [data-submenu-state] > a {
+  padding: var(--sidebar-nav-pagelink-padding);
+}
+.sidebar-nav [data-submenu-state="collapsed"] > a {
+  background: var(--sidebar-nav-pagelink-background);
+}
+.sidebar-nav [data-submenu-state="opened"] > a {
+  background: var(--sidebar-nav-pagelink-background--active);
+  color: var(--sidebar-nav-link-color--active);
 }

html/assets/js/plugins/menu-collapse.js

@@ -2,60 +2,51 @@
   const menuCollapse = function (hook, vm) {
     // Hook to execute after the page is fully loaded https://github.com/docsifyjs/docsify/blob/develop/docs/write-a-plugin.md
     hook.doneEach(() => {
+      // Select all parent items
       const parentItems = document.querySelectorAll('.sidebar-nav > ul > li');
 
       parentItems.forEach(item => {
         /**
          * Skip items that already have link or not rendered
          * Check on empty string required because an original docsify menu does not provide hooks after load
          */
-        if (item.firstChild.nodeType !== Node.TEXT_NODE || item.firstChild.textContent.trim() === "") return;
+        const textNode = item.firstChild;
+        if (textNode.nodeType !== Node.TEXT_NODE || textNode.textContent.trim() === "") return;
+
+        // Create link for text item
+        const link = document.createElement('a');
+        link.href = '#';
+        link.textContent = textNode.textContent;
+        textNode.parentNode.replaceChild(link, textNode);
 
         // Check if the parent item has a sublist
         const sublist = item.querySelector('ul');
+        if (!sublist) return;
 
-        if (sublist) {
-          // Check if any nested items in the sublist have the 'active' class
-          const nestedItems = sublist.querySelectorAll('li');
-          const hasActiveItems = Array.from(nestedItems).some(nestedItem => nestedItem.classList.contains('active'));
-
-          /**
-           * Add the 'collapse' class to items without active nested items, otherwise add 'active'
-           * That is need to highlight menu item on a page load when subitem is active
-           */
-          if (!hasActiveItems) {
-            item.classList.add('collapse');
-          } else {
-            item.classList.add('active');
-            item.classList.remove('collapse');
-          }
-
-          // Add class to sublist
-          sublist.classList.add('app-sub-sidebar');
-
-          // Wrap text item in a link to follow default menu behavior and classes
-          const textNode = item.firstChild;
-          const link = document.createElement('a');
-          link.href = '#/';
-          link.textContent = textNode.textContent;
-          textNode.parentNode.replaceChild(link, textNode);
+        // Check if any nested items in the sublist have the 'active' class
+        const hasActiveItems = sublist.querySelector('.active');
 
-          // Add click event listener to link to prevent default behavior
-          link.addEventListener('click', (e) => {
-            e.preventDefault();
-            // Close all other collapsed items when a link is clicked
-            parentItems.forEach(otherItem => {
-              if (otherItem !== item) {
-                otherItem.classList.remove('collapse');
-              }
-            });
-          });
+        /**
+         * Set data-submenu-state attribute to items without active nested items, otherwise set it to 'active'
+         * That is need to highlight menu item on a page load when subitem is active
+         */
+        if (hasActiveItems) {
+          item.setAttribute('data-submenu-state', 'opened');
+        } else {
+          item.setAttribute('data-submenu-state', 'collapsed');
         }
+
+        // Add click event listener to link to toggle submenu state
+        link.addEventListener('click', (e) => {
+          e.preventDefault();
+          const submenuState = item.getAttribute('data-submenu-state');
+          item.setAttribute('data-submenu-state', submenuState === 'collapsed' ? 'opened' : 'collapsed');
+        });
       });
     });
   };
 
   // Add the plugin to the Docsify plugin array
   $docsify = $docsify || {};
-  $docsify.plugins = [].concat(menuCollapse, $docsify.plugins || []);
+  $docsify.plugins = [$docsify.plugins || [], menuCollapse];
 })();