Merge pull request #2 from justcoded/feature/add-open-close-first-level-nav

Feature/add open close first level nav

Author: sgurin

CHANGELOG.md

@@ -9,6 +9,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ---
 <!--- END HEADER -->
 
+## [1.5.0]() _(2024-05-03)_
+### Added
+
+* Open-close for first level of sidebar menu
+
+---
+
 ## [1.4.0]() _(2024-02-22)_
 ### Added
 

html/assets/css/themeable-customization.css

@@ -17,3 +17,17 @@
 .mermaid {
   background-color: #fff;
 }
+
+[data-submenu-state="collapsed"] > ul {
+  display: none;
+}
+.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/folder-related-links.js

@@ -14,10 +14,10 @@
             const folder = vm.route.file.match(folderNameRegex)[1];
             const matches = markdown.matchAll(markdownLinkRegex);
             let newMarkdown = markdown;
-          console.log([folder, matches]);
+
 
             for (const [match, firstSymbol, urlInBrackets] of matches) {
-              console.log([match, firstSymbol, urlInBrackets])
+
                 const url = urlInBrackets.slice(1, -1);
 
                 if (firstSymbol === '!' || httpsRegex.test(url)) {

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

@@ -0,0 +1,52 @@
+(function () {
+  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
+         */
+        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;
+
+        // Check if any nested items in the sublist have the 'active' class
+        const hasActiveItems = sublist.querySelector('.active');
+
+        /**
+         * 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 = [$docsify.plugins || [], menuCollapse];
+})();

html/index.html

@@ -35,6 +35,7 @@
 <!--# if expr="${SSI_PLUGIN_FOLDER_RELATED_LINKS} = /(true|yes|1)/" -->
 <script src="/assets/js/plugins/folder-related-links.js"></script>
 <!--# endif -->
+<script src="/assets/js/plugins/menu-collapse.js"></script>
 <script src="/assets/js/prism/prism-bash.min.js"></script>
 <script src="/assets/js/prism/prism-php.min.js"></script>
 <script src="/assets/js/prism/prism-diff.min.js"></script>