diff --git a/CHANGELOG.md b/CHANGELOG.md index 81f06d4..6920325 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 --- +## [1.5.0]() _(2024-05-03)_ +### Added + +* Open-close for first level of sidebar menu + +--- + ## [1.4.0]() _(2024-02-22)_ ### Added diff --git a/html/assets/css/themeable-customization.css b/html/assets/css/themeable-customization.css index 399f870..f61084d 100644 --- a/html/assets/css/themeable-customization.css +++ b/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); +} diff --git a/html/assets/js/plugins/folder-related-links.js b/html/assets/js/plugins/folder-related-links.js index e28dd58..c000ee5 100644 --- a/html/assets/js/plugins/folder-related-links.js +++ b/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)) { diff --git a/html/assets/js/plugins/menu-collapse.js b/html/assets/js/plugins/menu-collapse.js new file mode 100644 index 0000000..60a5062 --- /dev/null +++ b/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]; +})(); diff --git a/html/index.html b/html/index.html index 45b2a11..ead8fc2 100644 --- a/html/index.html +++ b/html/index.html @@ -35,6 +35,7 @@ +