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 @@
+