docyard 0.7.0 → 0.9.0

data/lib/docyard/templates/assets/js/components/navigation.js

@@ -1,6 +1,3 @@
-// Docyard Navigation JavaScript
-// Handles sidebar navigation, mobile menu, accordion groups, and scroll behavior
-
 (function() {
   'use strict';
 
@@ -13,18 +10,36 @@
       return;
     }
 
+    var scrollPosition = 0;
+
+    function lockBodyScroll() {
+      scrollPosition = window.pageYOffset;
+      document.body.style.overflow = 'hidden';
+      document.body.style.position = 'fixed';
+      document.body.style.top = -scrollPosition + 'px';
+      document.body.style.width = '100%';
+    }
+
+    function unlockBodyScroll() {
+      document.body.style.removeProperty('overflow');
+      document.body.style.removeProperty('position');
+      document.body.style.removeProperty('top');
+      document.body.style.removeProperty('width');
+      window.scrollTo(0, scrollPosition);
+    }
+
     function openMenu() {
+      lockBodyScroll();
       sidebar.classList.add('is-open');
       overlay.classList.add('is-visible');
       toggle.setAttribute('aria-expanded', 'true');
-      document.body.style.overflow = 'hidden';
     }
 
     function closeMenu() {
       sidebar.classList.remove('is-open');
       overlay.classList.remove('is-visible');
       toggle.setAttribute('aria-expanded', 'false');
-      document.body.style.overflow = '';
+      unlockBodyScroll();
     }
 
     function toggleMenu() {
@@ -52,24 +67,86 @@
   }
 
   function initAccordion() {
-    const toggles = document.querySelectorAll('.nav-group-toggle');
+    var TOGGLE_STATE_KEY = 'docyard_toggle_states';
+    var toggles = document.querySelectorAll('[data-nav-toggle]');
+
+    function getDefaultCollapsed(navGroup) {
+      return navGroup.getAttribute('data-default-collapsed') === 'true';
+    }
+
+    function collapseGroup(navGroup, animate) {
+      var header = navGroup.querySelector('[data-nav-toggle]');
+      var children = navGroup.querySelector('.nav-group-children');
+      if (!header || !children) return;
+
+      if (animate) {
+        children.style.transition = 'max-height 0.2s cubic-bezier(0.4, 0, 1, 1)';
+      } else {
+        children.style.transition = 'none';
+      }
+      header.setAttribute('aria-expanded', 'false');
+      children.classList.add('collapsed');
+      children.style.maxHeight = '0';
+    }
+
+    function expandGroup(navGroup, animate) {
+      var header = navGroup.querySelector('[data-nav-toggle]');
+      var children = navGroup.querySelector('.nav-group-children');
+      if (!header || !children) return;
+
+      var fullHeight = children.scrollHeight;
+      if (animate) {
+        children.style.transition = 'max-height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)';
+      } else {
+        children.style.transition = 'none';
+      }
+      header.setAttribute('aria-expanded', 'true');
+      children.classList.remove('collapsed');
+      children.style.maxHeight = fullHeight + 'px';
+    }
+
+    function revertOthersToDefault(currentNavGroup) {
+      document.querySelectorAll('.nav-group').forEach(function(navGroup) {
+        if (navGroup === currentNavGroup) return;
+
+        var defaultCollapsed = getDefaultCollapsed(navGroup);
+        var children = navGroup.querySelector('.nav-group-children');
+        if (!children) return;
+
+        var isCurrentlyCollapsed = children.classList.contains('collapsed');
+
+        if (defaultCollapsed && !isCurrentlyCollapsed) {
+          collapseGroup(navGroup, true);
+        } else if (!defaultCollapsed && isCurrentlyCollapsed) {
+          expandGroup(navGroup, true);
+        }
+      });
+    }
 
     toggles.forEach(function(toggle) {
-      toggle.addEventListener('click', function() {
-        const expanded = toggle.getAttribute('aria-expanded') === 'true';
-        const children = toggle.nextElementSibling;
+      toggle.addEventListener('click', function(e) {
+        var expanded = toggle.getAttribute('aria-expanded') === 'true';
+        var navGroup = toggle.closest('.nav-group');
+        var children = navGroup ? navGroup.querySelector('.nav-group-children') : null;
 
-        if (!children || !children.classList.contains('nav-group-children')) {
+        if (!children) {
           return;
         }
 
-        toggle.setAttribute('aria-expanded', !expanded);
-        children.classList.toggle('collapsed');
+        revertOthersToDefault(navGroup);
+
+        if (toggle.tagName === 'A') {
+          var href = toggle.getAttribute('href');
+          var states = {};
+          states[href] = true;
+          sessionStorage.setItem(TOGGLE_STATE_KEY, JSON.stringify(states));
+          return;
+        }
 
         if (expanded) {
-          children.style.maxHeight = '0';
+          collapseGroup(navGroup, true);
         } else {
-          children.style.maxHeight = children.scrollHeight + 'px';
+          expandGroup(navGroup, true);
         }
       });
     });
@@ -80,32 +157,80 @@
   }
 
   function expandActiveGroups() {
-    const activeLinks = document.querySelectorAll('a.active');
+    var TOGGLE_STATE_KEY = 'docyard_toggle_states';
+    var currentUrl = window.location.pathname;
+    var lastUrl = sessionStorage.getItem('docyard_last_url') || '';
+    var toggleStates = JSON.parse(sessionStorage.getItem(TOGGLE_STATE_KEY) || '{}');
 
-    activeLinks.forEach(function(activeLink) {
-      let parent = activeLink.closest('.nav-group-children');
+    sessionStorage.setItem('docyard_last_url', currentUrl);
+    sessionStorage.removeItem(TOGGLE_STATE_KEY);
 
-      while (parent) {
-        if (parent.classList.contains('nav-group-children')) {
-          parent.classList.remove('collapsed');
+    document.querySelectorAll('[data-nav-toggle]').forEach(function(toggle) {
+      if (toggle.tagName !== 'A') return;
 
-          const toggle = parent.previousElementSibling;
-          if (toggle && toggle.classList.contains('nav-group-toggle')) {
-            toggle.setAttribute('aria-expanded', 'true');
+      var href = toggle.getAttribute('href');
+      var shouldOpen = toggleStates[href] === true;
 
-            parent.style.maxHeight = 'none';
-            const height = parent.scrollHeight;
-            parent.style.maxHeight = height + 'px';
-          }
-        }
+      if (!shouldOpen) return;
+
+      var navGroup = toggle.closest('.nav-group');
+      var children = navGroup ? navGroup.querySelector('.nav-group-children') : null;
+
+      if (!children || !children.classList.contains('collapsed')) return;
 
-        parent = parent.parentElement?.closest('.nav-group-children');
+      var fullHeight = children.scrollHeight;
+
+      children.style.transition = 'none';
+      children.style.maxHeight = '0';
+      children.offsetHeight;
+
+      children.style.transition = 'max-height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)';
+      requestAnimationFrame(function() {
+        toggle.setAttribute('aria-expanded', 'true');
+        children.classList.remove('collapsed');
+        children.style.maxHeight = fullHeight + 'px';
+      });
+    });
+
+    var expandedGroups = document.querySelectorAll('.nav-group-children:not(.collapsed)');
+
+    expandedGroups.forEach(function(group) {
+      if (group.style.maxHeight) {
+        return;
+      }
+
+      var navGroup = group.closest('.nav-group');
+      var header = navGroup ? navGroup.querySelector('.nav-group-header') : null;
+      var headerHref = header && header.tagName === 'A' ? header.getAttribute('href') : null;
+
+      if (headerHref && toggleStates[headerHref] === true) {
+        group.style.maxHeight = group.scrollHeight + 'px';
+        return;
+      }
+
+      var wasInGroup = headerHref && (lastUrl === headerHref || lastUrl.startsWith(headerHref + '/'));
+      var shouldAnimate = header && header.classList.contains('active') && !wasInGroup;
+      var fullHeight = group.scrollHeight;
+
+      if (shouldAnimate) {
+        group.style.transition = 'none';
+        group.style.maxHeight = '0';
+        group.classList.add('collapsed');
+        group.offsetHeight;
+
+        group.style.transition = 'max-height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)';
+        requestAnimationFrame(function() {
+          group.classList.remove('collapsed');
+          group.style.maxHeight = fullHeight + 'px';
+        });
+      } else {
+        group.style.maxHeight = fullHeight + 'px';
       }
     });
   }
 
   function initSidebarScroll() {
-    const scrollContainer = document.querySelector('.sidebar nav');
+    const scrollContainer = document.querySelector('.sidebar-scroll');
     if (!scrollContainer) return;
 
     const STORAGE_KEY = 'docyard_sidebar_scroll';
@@ -153,54 +278,38 @@
     }
   }
 
-  function initScrollBehavior() {
-    const header = document.querySelector('.header');
-    const secondaryHeader = document.querySelector('.secondary-header');
-
-    if (!header || !secondaryHeader) return;
-
-    let lastScrollTop = 0;
-    let ticking = false;
+  function initScrollFadeIndicators() {
+    const sidebar = document.querySelector('.sidebar');
+    const scrollContainer = document.querySelector('.sidebar-scroll');
+    if (!sidebar || !scrollContainer) return;
 
-    function isMobile() {
-      return window.innerWidth <= 1024;
-    }
+    function updateFadeIndicators() {
+      const scrollTop = scrollContainer.scrollTop;
+      const scrollHeight = scrollContainer.scrollHeight;
+      const clientHeight = scrollContainer.clientHeight;
+      const threshold = 10;
 
-    function updateHeaders() {
-      if (!isMobile()) {
-        header.classList.remove('hide-on-scroll');
-        secondaryHeader.classList.remove('shift-up');
-        ticking = false;
-        return;
+      if (scrollTop > threshold) {
+        sidebar.classList.add('can-scroll-top');
+      } else {
+        sidebar.classList.remove('can-scroll-top');
       }
 
-      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-
-      if (scrollTop > lastScrollTop && scrollTop > 100) {
-        header.classList.add('hide-on-scroll');
-        secondaryHeader.classList.add('shift-up');
-      } else if (scrollTop < lastScrollTop) {
-        header.classList.remove('hide-on-scroll');
-        secondaryHeader.classList.remove('shift-up');
+      if (scrollTop + clientHeight < scrollHeight - threshold) {
+        sidebar.classList.add('can-scroll-bottom');
+      } else {
+        sidebar.classList.remove('can-scroll-bottom');
       }
-
-      lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
-      ticking = false;
     }
 
-    window.addEventListener('scroll', function() {
-      if (!ticking) {
-        window.requestAnimationFrame(updateHeaders);
-        ticking = true;
-      }
-    });
+    updateFadeIndicators();
 
-    window.addEventListener('resize', function() {
-      if (!isMobile()) {
-        header.classList.remove('hide-on-scroll');
-        secondaryHeader.classList.remove('shift-up');
-      }
-    });
+    scrollContainer.addEventListener('scroll', updateFadeIndicators);
+
+    window.addEventListener('resize', updateFadeIndicators);
+  }
+
+  function initScrollBehavior() {
   }
 
   if ('scrollRestoration' in history) {
@@ -213,6 +322,7 @@
       initAccordion();
       expandActiveGroups();
       initSidebarScroll();
+      initScrollFadeIndicators();
       initScrollBehavior();
     });
   } else {
@@ -220,6 +330,7 @@
     initAccordion();
     expandActiveGroups();
     initSidebarScroll();
+    initScrollFadeIndicators();
     initScrollBehavior();
   }
 })();

data/lib/docyard/templates/assets/js/components/search.js

@@ -1,14 +1,3 @@
-/**
- * SearchManager - Handles search functionality with Pagefind integration
- *
- * Features:
- * - Cmd+K / Ctrl+K keyboard shortcut
- * - Lazy loading of Pagefind
- * - Keyboard navigation in results
- * - Debounced search input
- *
- * @class SearchManager
- */
 class SearchManager {
   constructor() {
     this.modal = document.querySelector('[data-search-modal]');
@@ -32,7 +21,6 @@ class SearchManager {
     this.DEBOUNCE_DELAY = 150;
     this.RESULTS_PER_PAGE = 6;
 
-    // State for "load more" functionality
     this.allSearchResults = [];
     this.displayedCount = 0;
     this.currentQuery = '';
@@ -52,36 +40,29 @@ class SearchManager {
   }
 
   attachEventListeners() {
-    // Global keyboard shortcut
     document.addEventListener('keydown', this.handleKeyDown);
 
-    // Trigger button
     if (this.trigger) {
       this.trigger.addEventListener('click', () => this.open());
     }
 
-    // Backdrop click to close
     if (this.backdrop) {
       this.backdrop.addEventListener('click', () => this.close());
     }
 
-    // Close button
     if (this.closeButton) {
       this.closeButton.addEventListener('click', () => this.close());
     }
 
-    // Clear button
     if (this.clearButton) {
       this.clearButton.addEventListener('click', () => this.clearSearch());
     }
 
-    // Search input
     if (this.input) {
       this.input.addEventListener('input', this.handleInput);
       this.input.addEventListener('keydown', (e) => this.handleInputKeyDown(e));
     }
 
-    // Results click delegation
     if (this.resultsContainer) {
       this.resultsContainer.addEventListener('click', this.handleResultClick);
     }
@@ -99,21 +80,18 @@ class SearchManager {
   }
 
   handleKeyDown(event) {
-    // Cmd+K or Ctrl+K to open
     if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
       event.preventDefault();
       this.toggle();
       return;
     }
 
-    // Escape to close
     if (event.key === 'Escape' && this.isOpen) {
       event.preventDefault();
       this.close();
       return;
     }
 
-    // Forward slash to focus search (when not in an input)
     if (event.key === '/' && !this.isOpen && !this.isInputFocused()) {
       event.preventDefault();
       this.open();
@@ -140,12 +118,10 @@ class SearchManager {
   handleInput(event) {
     const query = event.target.value.trim();
 
-    // Update clear button visibility
     if (this.clearButton) {
       this.clearButton.hidden = query.length === 0;
     }
 
-    // Debounce search
     if (this.searchTimeout) {
       clearTimeout(this.searchTimeout);
     }
@@ -195,10 +171,8 @@ class SearchManager {
     this.modal.hidden = false;
     document.body.style.overflow = 'hidden';
 
-    // Trigger animation on next frame
     requestAnimationFrame(() => {
       this.modal.classList.add('is-open');
-      // Double rAF ensures focus works after CSS transition starts
       requestAnimationFrame(() => {
         if (this.input) {
           this.input.focus();
@@ -206,7 +180,6 @@ class SearchManager {
       });
     });
 
-    // Initialize Pagefind if not already done
     if (!this.pagefind) {
       await this.initPagefind();
     }
@@ -220,18 +193,15 @@ class SearchManager {
     document.body.style.overflow = '';
     this.selectedIndex = -1;
 
-    // Hide modal after animation completes
     setTimeout(() => {
       if (!this.isOpen) {
         this.modal.hidden = true;
-        // Reset body visibility for next open
         if (this.body) {
           this.body.hidden = true;
         }
       }
     }, 200);
 
-    // Return focus to trigger
     if (this.trigger) {
       this.trigger.focus();
     }
@@ -274,13 +244,11 @@ class SearchManager {
         return;
       }
 
-      // Store state for "load more"
       this.allSearchResults = searchResults.results;
       this.currentQuery = query;
       this.displayedCount = 0;
       this.groupedResults = [];
 
-      // Load initial batch
       await this.loadMoreResults();
     } catch (error) {
       console.error('Search error:', error);
@@ -294,17 +262,14 @@ class SearchManager {
 
     if (startIndex >= this.allSearchResults.length) return;
 
-    // Load the next batch of results
     const resultsData = await Promise.all(
       this.allSearchResults.slice(startIndex, endIndex).map(r => r.data())
     );
 
-    // Group results by page with sections nested
     const newGrouped = this.groupResults(resultsData);
     this.groupedResults = [...this.groupedResults, ...newGrouped];
     this.displayedCount = endIndex;
 
-    // Flatten for keyboard navigation
     this.results = this.flattenForNavigation(this.groupedResults);
     this.renderGroupedResults(this.groupedResults, this.currentQuery, this.allSearchResults.length);
   }
@@ -320,14 +285,11 @@ class SearchManager {
     for (const result of resultsData) {
       const pageTitle = result.meta?.title || this.extractTitleFromUrl(result.url);
 
-      // Get sub-results (sections) for this page
-      // Filter out sections with same title as page (H1 heading duplicates)
       const subResults = (result.sub_results || [])
         .filter(sub => {
           if (sub.url === result.url) return false;
           if (!sub.title) return false;
           const cleanedTitle = this.cleanSectionTitle(sub.title);
-          // Skip if section title matches page title
           if (cleanedTitle.toLowerCase() === pageTitle.toLowerCase()) return false;
           return true;
         })
@@ -352,7 +314,6 @@ class SearchManager {
   }
 
   cleanSectionTitle(title) {
-    // Remove trailing # that Pagefind sometimes includes
     return title.replace(/#$/, '').trim();
   }
 
@@ -389,7 +350,6 @@ class SearchManager {
       return this.renderPageResult(page, pageIndex, isPageSelected, sectionsHtml, query);
     }).join('');
 
-    // Add "View more results" link if there are more results
     const hasMore = this.displayedCount < totalResults;
     const loadMoreHtml = hasMore ? `
       <li class="search-load-more">
@@ -401,7 +361,6 @@ class SearchManager {
 
     this.resultsContainer.innerHTML = resultsHtml + loadMoreHtml;
 
-    // Attach event listener to "View more" button
     const loadMoreBtn = this.resultsContainer.querySelector('[data-search-load-more]');
     if (loadMoreBtn) {
       loadMoreBtn.addEventListener('click', this.handleLoadMore);
@@ -409,7 +368,6 @@ class SearchManager {
   }
 
   renderPageResult(page, index, isSelected, sectionsHtml, query) {
-    // Article icon (Phosphor)
     const pageIcon = `<svg class="search-result-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor">
       <path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,160H40V56H216V200ZM184,96a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,96Zm0,32a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,128Zm0,32a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,160Z"></path>
     </svg>`;
@@ -473,7 +431,6 @@ class SearchManager {
     const terms = query.trim().split(/\s+/).filter(t => t.length > 1);
     if (terms.length === 0) return escaped;
 
-    // Match exact search term only (like Stripe does)
     const regex = new RegExp(`(${terms.map(t => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
       .join('|')})`, 'gi');
     return escaped.replace(regex, '<mark class="search-title-highlight">$1</mark>');
@@ -482,30 +439,22 @@ class SearchManager {
   highlightQuery(text, query, title = '') {
     if (!query || !text) return this.escapeHtml(text);
 
-    // Decode HTML entities first (Pagefind may return encoded HTML)
     let cleanText = this.decodeHtmlEntities(text);
 
-    // Strip all HTML tags
     cleanText = cleanText.replace(/<[^>]*>/g, '');
 
-    // Remove the title if it appears at the start of the excerpt (Pagefind often includes it)
     if (title) {
-      // Remove "Title#" or "Title:" patterns at the start
       const titlePattern = new RegExp(`^${title.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}[#:]?\\s*`, 'i');
       cleanText = cleanText.replace(titlePattern, '');
     }
 
-    // Clean markdown and special characters
     cleanText = this.cleanMarkdown(cleanText);
 
-    // Escape for safe HTML
     const escaped = this.escapeHtml(cleanText);
 
-    // Highlight exact search term only (like Stripe does)
     const terms = query.trim().split(/\s+/).filter(t => t.length > 1);
     if (terms.length === 0) return escaped;
 
-    // Match exact search term only
     const regex = new RegExp(`(${terms.map(t => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
       .join('|')})`, 'gi');
     return escaped.replace(regex, '<mark>$1</mark>');
@@ -519,51 +468,33 @@ class SearchManager {
 
   cleanMarkdown(text) {
     return text
-      // Remove code block markers with optional language/title (```ruby, ```js title="foo")
       .replace(/```\w*(?:\s+[^`\n]*)?\n?/g, '')
       .replace(/```/g, '')
-      // Remove Kramdown/Jekyll directives like {:/nomarkdown}, {::nomarkdown}, {:.class}
       .replace(/\{:?:?[^}]*\}/g, '')
-      // Remove heading anchors like "Dark Mode#" or "Styling#" (word followed by #)
       .replace(/(\w)#(?=\s|$|[A-Z])/g, '$1')
-      // Remove markdown bold/italic
       .replace(/\*\*([^*]+)\*\*/g, '$1')
       .replace(/\*([^*]+)\*/g, '$1')
       .replace(/__([^_]+)__/g, '$1')
       .replace(/_([^_]+)_/g, '$1')
-      // Remove markdown links [text](url)
       .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
-      // Remove inline code backticks
       .replace(/`([^`]+)`/g, '$1')
-      // Remove standalone backticks
       .replace(/`/g, '')
-      // Remove heading markers
       .replace(/^#+\s*/gm, '')
-      // Remove title="..." and similar attributes
       .replace(/\s*title=["'][^"']*["']/gi, '')
-      // Remove URLs (http, https, ftp)
       .replace(/https?:\/\/[^\s<>"{}|\\^`[\]]+/gi, '')
       .replace(/ftp:\/\/[^\s<>"{}|\\^`[\]]+/gi, '')
-      // Remove YAML-like patterns (key: value)
       .replace(/\b\w+:\s*["']?[^"'\s,]+["']?(?=\s|,|$)/g, '')
-      // Remove common code syntax patterns
       .replace(/\b(const|let|var|function|interface|class|import|export|return|if|else)\b/g, '')
       .replace(/[=;{}()<>[\]]/g, ' ')
-      // Remove common unicode symbols
       .replace(/[✓✔✗✘→←↑↓•·►▸▹▶]/g, '')
-      // Remove YAML-like frontmatter patterns
       .replace(/^---[\s\S]*?---/m, '')
-      // Clean up navigation/menu text patterns
       .replace(/Skip to main content/gi, '')
       .replace(/On this page/gi, '')
       .replace(/Menu/gi, '')
       .replace(/Search\.\.\./gi, '')
-      // Remove list markers
       .replace(/^[\s]*[-*+]\s+/gm, '')
       .replace(/^[\s]*\d+\.\s+/gm, '')
-      // Clean up excessive whitespace
       .replace(/\s+/g, ' ')
-      // Remove leading/trailing punctuation
       .replace(/^[.\s,;:]+/, '')
       .replace(/[.\s,;:]+$/, '')
       .trim();
@@ -586,12 +517,10 @@ class SearchManager {
   updateSelection(newIndex) {
     const resultElements = this.resultsContainer.querySelectorAll('.search-result');
 
-    // Remove previous selection
     if (this.selectedIndex >= 0 && resultElements[this.selectedIndex]) {
       resultElements[this.selectedIndex].setAttribute('aria-selected', 'false');
     }
 
-    // Add new selection
     this.selectedIndex = newIndex;
     if (resultElements[newIndex]) {
       resultElements[newIndex].setAttribute('aria-selected', 'true');
@@ -666,14 +595,10 @@ class SearchManager {
   }
 }
 
-/**
- * Initialize search on page load
- */
 function initializeSearch() {
   new SearchManager();
 }
 
-// Initialize on DOM ready
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', initializeSearch);
 } else {

data/lib/docyard/templates/assets/js/components/sidebar-toggle.js

@@ -0,0 +1,29 @@
+(function() {
+  'use strict';
+
+  var STORAGE_KEY = 'docyard_sidebar_collapsed';
+
+  function initSidebarToggle() {
+    var toggle = document.querySelector('.breadcrumb-toggle');
+    var sidebar = document.querySelector('.sidebar');
+
+    if (!toggle || !sidebar) {
+      return;
+    }
+
+    var isCollapsed = document.documentElement.classList.contains('sidebar-collapsed');
+    toggle.setAttribute('aria-expanded', !isCollapsed);
+
+    toggle.addEventListener('click', function() {
+      var collapsed = document.documentElement.classList.toggle('sidebar-collapsed');
+      localStorage.setItem(STORAGE_KEY, collapsed);
+      toggle.setAttribute('aria-expanded', !collapsed);
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initSidebarToggle);
+  } else {
+    initSidebarToggle();
+  }
+})();