Refactor sidebar component structure

Author: Dobrunia

src/backend/views/components/sidebar-branch.twig

@@ -0,0 +1,26 @@
+{% set is_leaf = node.children is not defined or node.children is empty %}
+<section class="docs-sidebar__section{{ nested ? ' docs-sidebar__section--nested' : '' }}{{ is_leaf ? ' docs-sidebar__section--leaf' : '' }}" data-id="{{ node._id }}">
+  <a class="docs-sidebar__section-title-wrapper"
+    href="{{ node.uri ? '/' ~ node.uri : '/page/' ~ node._id }}"
+  >
+    <div class="docs-sidebar__section-title {{ page is defined and toString(page._id) == toString(node._id) ? 'docs-sidebar__section-title--active' : '' }}">
+      <span>
+        {{ node.title | striptags }}
+      </span>
+      {% if node.children is defined and node.children is not empty %}
+        <button type="button" class="docs-sidebar__section-toggler" aria-label="Toggle section">
+          {{ svg('arrow-up') }}
+        </button>
+      {% endif %}
+    </div>
+  </a>
+  {% if node.children is defined and node.children is not empty %}
+    <ul class="docs-sidebar__section-list docs-sidebar__section-list--nested">
+      {% for child in node.children %}
+        <li>
+          {% include 'components/sidebar-section.twig' with { node: child, nested: true } %}
+        </li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+</section>

src/backend/views/components/sidebar-section.twig

@@ -10,25 +10,7 @@
 	    <input class="docs-sidebar__search" type="text" placeholder="Search" />
 	  </span>
     {% for firstLevelPage in menu %}
-      <section class="docs-sidebar__section" data-id="{{firstLevelPage._id}}">
-        <a class="docs-sidebar__section-title-wrapper"
-          href="{{firstLevelPage.uri ? '/' ~ firstLevelPage.uri : '/page/' ~ firstLevelPage._id }}"
-        >
-        <div class="docs-sidebar__section-title {{page is defined and page._id == firstLevelPage._id ? 'docs-sidebar__section-title--active' : ''}}">
-          <span>
-            {{ firstLevelPage.title | striptags }}
-          </span>
-          {% if firstLevelPage.children is not empty %}
-            <button class="docs-sidebar__section-toggler">
-              {{ svg('arrow-up') }}
-            </button>
-          {% endif %}
-        </div>
-        </a>
-        {% if firstLevelPage.children is not empty %}
-          {% include 'components/sidebar-branch.twig' with { nodes: firstLevelPage.children, ulClass: '' } %}
-        {% endif %}
-      </section>
+      {% include 'components/sidebar-section.twig' with { node: firstLevelPage, nested: false } %}
     {% endfor %}
 
     <div class="docs-sidebar__logo">

src/backend/views/components/sidebar.twig

@@ -23,14 +23,12 @@ export default class SidebarFilter {
    */
   static get CSS() {
     return {
+      section: 'docs-sidebar__section',
       sectionHidden: 'docs-sidebar__section--hidden',
       sectionTitle: 'docs-sidebar__section-title',
       sectionTitleSelected: 'docs-sidebar__section-title--selected',
       sectionTitleActive: 'docs-sidebar__section-title--active',
       sectionList: 'docs-sidebar__section-list',
-      sectionListItem: 'docs-sidebar__section-list-item',
-      sectionListItemWrapperHidden: 'docs-sidebar__section-list-item-wrapper--hidden',
-      sectionListItemSlelected: 'docs-sidebar__section-list-item--selected',
       sidebarSearchWrapper: 'docs-sidebar__search-wrapper',
     };
   }
@@ -43,7 +41,7 @@ export default class SidebarFilter {
      * Stores refs to HTML elements needed for sidebar filter to work.
      */
     this.sidebar = null;
-    this.sections = [];
+    this.rootSections = [];
     this.sidebarContent = null;
     this.search = null;
     this.searchResults = [];
@@ -53,14 +51,14 @@ export default class SidebarFilter {
   /**
    * Initialize sidebar filter.
    *
-   * @param {HTMLElement[]} sections - Array of sections.
+   * @param {HTMLElement[]} rootSections - Top-level sections (direct children of sidebar content).
    * @param {HTMLElement} sidebarContent - Sidebar content.
    * @param {HTMLElement} search - Search input.
    * @param {Function} setSectionCollapsed - Function to set section collapsed.
    */
-  init(sections, sidebarContent, search, setSectionCollapsed) {
+  init(rootSections, sidebarContent, search, setSectionCollapsed) {
     // Store refs to HTML elements.
-    this.sections = sections;
+    this.rootSections = rootSections;
     this.sidebarContent = sidebarContent;
     this.search = search;
     this.setSectionCollapsed = setSectionCollapsed;
@@ -202,11 +200,8 @@ export default class SidebarFilter {
       return;
     }
 
-    // focus title or item.
     if (type === 'title') {
       element.classList.add(SidebarFilter.CSS.sectionTitleSelected);
-    } else if (type === 'item') {
-      element.classList.add(SidebarFilter.CSS.sectionListItemSlelected);
     }
 
     // scroll to focused title or item.
@@ -230,11 +225,8 @@ export default class SidebarFilter {
       return;
     }
 
-    // blur title or item.
     if (type === 'title') {
       element.classList.remove(SidebarFilter.CSS.sectionTitleSelected);
-    } else if (type === 'item') {
-      element.classList.remove(SidebarFilter.CSS.sectionListItemSlelected);
     }
   }
 
@@ -294,54 +286,76 @@ export default class SidebarFilter {
    * @param {string} searchValue - Search value.
    */
   filterSection(section, searchValue) {
-    // match with section title.
     const sectionTitle = section.querySelector('.' + SidebarFilter.CSS.sectionTitle);
-    const sectionList = section.querySelector('.' + SidebarFilter.CSS.sectionList);
+    const sectionList = section.querySelector(':scope > .' + SidebarFilter.CSS.sectionList);
+
+    if (!sectionTitle) {
+      return false;
+    }
+
+    const empty = !searchValue || !searchValue.trim();
+
+    if (empty) {
+      section.classList.remove(SidebarFilter.CSS.sectionHidden);
+
+      if (sectionList) {
+        Array.from(sectionList.children).forEach((li) => {
+          const nestedSection = li.querySelector(':scope > .' + SidebarFilter.CSS.section);
+
+          if (nestedSection) {
+            this.filterSection(nestedSection, searchValue);
+          }
+        });
+      }
+
+      return true;
+    }
 
-    // check if section title matches.
     const isTitleMatch = this.isValueMatched(sectionTitle.textContent, searchValue);
+    let hasMatch = isTitleMatch;
 
-    const matchResults = [];
-    // match with section items.
-    let isSingleItemMatch = false;
+    if (isTitleMatch) {
+      this.searchResults.push({
+        element: sectionTitle,
+        type: 'title',
+      });
+    }
 
     if (sectionList) {
-      const sectionListItems = sectionList.querySelectorAll('.' + SidebarFilter.CSS.sectionListItem);
-
-      sectionListItems.forEach(item => {
-        if (this.isValueMatched(item.textContent, searchValue)) {
-          // remove hiden class from item.
-          item.parentElement.classList.remove(SidebarFilter.CSS.sectionListItemWrapperHidden);
-          // add item to search results.
-          matchResults.push({
-            element: item,
-            type: 'item',
-          });
-          isSingleItemMatch = true;
-        } else {
-          // hide item if it is not a match.
-          item.parentElement.classList.add(SidebarFilter.CSS.sectionListItemWrapperHidden);
+      for (const li of sectionList.children) {
+        const nestedSection = li.querySelector(':scope > .' + SidebarFilter.CSS.section);
+
+        if (!nestedSection) {
+          continue;
         }
-      });
-    }
-    if (!isTitleMatch && !isSingleItemMatch) {
-      // hide section if it's items are not a match.
-      section.classList.add(SidebarFilter.CSS.sectionHidden);
-    } else {
-      const parentSection = sectionTitle.closest('section');
 
-      // if item is in collapsed section, expand it.
-      if (!parentSection.classList.contains(SidebarFilter.CSS.sectionTitleActive)) {
-        this.setSectionCollapsed(parentSection, false);
+        const childHasMatch = this.filterSection(nestedSection, searchValue);
+
+        hasMatch = hasMatch || childHasMatch;
       }
-      // show section if it's items are a match.
+    }
+
+    if (hasMatch) {
       section.classList.remove(SidebarFilter.CSS.sectionHidden);
-      // add section title to search results.
-      this.searchResults.push({
-        element: sectionTitle,
-        type: 'title',
-      }, ...matchResults);
+      this.setSectionCollapsed(section, false);
+
+      let el = section.parentElement;
+
+      while (el && el !== this.sidebarContent) {
+        const ancSection = el.closest('.' + SidebarFilter.CSS.section);
+
+        if (!ancSection) {
+          break;
+        }
+
+        this.setSectionCollapsed(ancSection, false);
+        el = ancSection.parentElement;
+      }
+    } else {
+      section.classList.add(SidebarFilter.CSS.sectionHidden);
     }
+
+    return hasMatch;
   }
 
   /**
@@ -356,8 +370,7 @@ export default class SidebarFilter {
     this.selectedSearchResultIndex = null;
     // empty search results.
     this.searchResults = [];
-    // match search value with sidebar sections.
-    this.sections.forEach(section => {
+    this.rootSections.forEach(section => {
       this.filterSection(section, searchValue);
     });
   }