jekyll-theme-zer0 0.16.0 → 0.17.2

data/_includes/components/mermaid.html

@@ -47,6 +47,108 @@
 <!-- Initialize Mermaid with custom configuration -->
 <script>
   document.addEventListener('DOMContentLoaded', function() {
+    // ============================================================
+    // Helper function to detect Bootstrap theme
+    // ============================================================
+    function getBootstrapTheme() {
+      // Check data-bs-theme attribute on html element
+      var htmlTheme = document.documentElement.getAttribute('data-bs-theme');
+      if (htmlTheme === 'dark' || htmlTheme === 'light') {
+        return htmlTheme;
+      }
+      // Fallback to prefers-color-scheme
+      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        return 'dark';
+      }
+      return 'light';
+    }
+    
+    // ============================================================
+    // Helper function to get Mermaid theme configuration
+    // ============================================================
+    function getMermaidConfig(theme) {
+      var isDark = theme === 'dark';
+      
+      if (isDark) {
+        // Dark mode configuration
+        return {
+          theme: 'dark',
+          themeVariables: {
+            primaryColor: '#0d6efd',
+            primaryTextColor: '#ffffff',
+            primaryBorderColor: '#0a58ca',
+            lineColor: '#6c757d',
+            secondaryColor: '#6c757d',
+            tertiaryColor: '#212529',
+            background: '#212529',
+            mainBkg: '#212529',
+            secondBkg: '#343a40',
+            tertiaryBkg: '#495057',
+            textColor: '#ffffff',
+            secondaryTextColor: '#adb5bd',
+            tertiaryTextColor: '#6c757d',
+            lineColor: '#6c757d',
+            border1: '#495057',
+            border2: '#6c757d',
+            noteBkgColor: '#343a40',
+            noteTextColor: '#ffffff',
+            noteBorderColor: '#6c757d',
+            actorBkg: '#0d6efd',
+            actorBorder: '#0a58ca',
+            actorTextColor: '#ffffff',
+            actorLineColor: '#ffffff',
+            signalColor: '#ffffff',
+            signalTextColor: '#ffffff',
+            labelBoxBkgColor: '#343a40',
+            labelBoxBorderColor: '#6c757d',
+            labelTextColor: '#ffffff',
+            loopTextColor: '#ffffff',
+            activationBorderColor: '#0d6efd',
+            activationBkgColor: '#0d6efd',
+            sequenceNumberColor: '#ffffff',
+            sectionBkgColor: '#343a40',
+            altSectionBkgColor: '#495057',
+            excludeBkgColor: '#495057',
+            taskBorderColor: '#0d6efd',
+            taskBkgColor: '#0d6efd',
+            taskTextLightColor: '#ffffff',
+            taskTextColor: '#ffffff',
+            taskTextDarkColor: '#000000',
+            taskTextOutsideColor: '#ffffff',
+            taskTextClickableColor: '#0d6efd',
+            activeTaskBorderColor: '#0a58ca',
+            activeTaskBkgColor: '#0a58ca',
+            gridColor: '#6c757d',
+            doneTaskBkgColor: '#198754',
+            doneTaskBorderColor: '#146c43',
+            critBorderColor: '#dc3545',
+            critBkgColor: '#dc3545',
+            todayLineColor: '#ffc107'
+          }
+        };
+      } else {
+        // Light mode configuration
+        return {
+          theme: 'default',
+          themeVariables: {
+            primaryColor: '#007bff',
+            primaryTextColor: '#fff',
+            primaryBorderColor: '#0056b3',
+            lineColor: '#6c757d',
+            secondaryColor: '#6c757d',
+            tertiaryColor: '#f8f9fa',
+            background: '#ffffff',
+            mainBkg: '#ffffff',
+            secondBkg: '#f8f9fa',
+            tertiaryBkg: '#e9ecef',
+            textColor: '#212529',
+            secondaryTextColor: '#6c757d',
+            tertiaryTextColor: '#adb5bd'
+          }
+        };
+      }
+    }
+    
     // ============================================================
     // Step 1: Convert native markdown code blocks to mermaid divs
     // This enables ```mermaid syntax to work with GitHub Pages
@@ -86,20 +188,16 @@
     });
     
     // ============================================================
-    // Step 2: Initialize Mermaid with custom configuration
+    // Step 2: Initialize Mermaid with theme-aware configuration
     // ============================================================
     
+    var bootstrapTheme = getBootstrapTheme();
+    var mermaidThemeConfig = getMermaidConfig(bootstrapTheme);
+    
     mermaid.initialize({
       startOnLoad: false,  // We'll manually run after conversion
-      theme: 'forest',     // Options: default, forest, dark, neutral, base
-      themeVariables: {
-        primaryColor: '#007bff',
-        primaryTextColor: '#fff',
-        primaryBorderColor: '#0056b3',
-        lineColor: '#6c757d',
-        secondaryColor: '#6c757d',
-        tertiaryColor: '#f8f9fa'
-      },
+      theme: mermaidThemeConfig.theme,
+      themeVariables: mermaidThemeConfig.themeVariables,
       flowchart: {
         useMaxWidth: true,
         htmlLabels: true,
@@ -139,10 +237,82 @@
     
     // Run mermaid to render all .mermaid divs
     mermaid.run().then(function() {
-      console.log('Mermaid.js: All diagrams rendered successfully');
+      console.log('Mermaid.js: All diagrams rendered successfully with theme:', bootstrapTheme);
     }).catch(function(error) {
       console.warn('Mermaid.js: Some diagrams failed to render', error);
     });
+    
+    // ============================================================
+    // Step 4: Watch for theme changes and re-render diagrams
+    // ============================================================
+    
+    // Create a MutationObserver to watch for theme changes
+    var themeObserver = new MutationObserver(function(mutations) {
+      mutations.forEach(function(mutation) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'data-bs-theme') {
+          var newTheme = getBootstrapTheme();
+          var newMermaidConfig = getMermaidConfig(newTheme);
+          
+          // Update Mermaid configuration
+          mermaid.initialize({
+            startOnLoad: false,
+            theme: newMermaidConfig.theme,
+            themeVariables: newMermaidConfig.themeVariables,
+            flowchart: {
+              useMaxWidth: true,
+              htmlLabels: true,
+              curve: 'basis'
+            },
+            sequence: {
+              diagramMarginX: 50,
+              diagramMarginY: 10,
+              actorMargin: 50,
+              width: 150,
+              height: 65,
+              boxMargin: 10,
+              boxTextMargin: 5,
+              noteMargin: 10,
+              messageMargin: 35,
+              mirrorActors: true,
+              bottomMarginAdj: 1,
+              useMaxWidth: true
+            },
+            gantt: {
+              titleTopMargin: 25,
+              barHeight: 20,
+              barGap: 4,
+              topPadding: 50,
+              leftPadding: 75,
+              gridLineStartPadding: 35,
+              fontSize: 11,
+              numberSectionStyles: 4,
+              axisFormat: '%Y-%m-%d'
+            },
+            securityLevel: 'loose'
+          });
+          
+          // Re-render all diagrams with new theme
+          var mermaidDivs = document.querySelectorAll('.mermaid');
+          mermaidDivs.forEach(function(div) {
+            var content = div.textContent || div.innerText;
+            div.innerHTML = '';
+            div.textContent = content;
+          });
+          
+          mermaid.run().then(function() {
+            console.log('Mermaid.js: Diagrams re-rendered with theme:', newTheme);
+          }).catch(function(error) {
+            console.warn('Mermaid.js: Some diagrams failed to re-render', error);
+          });
+        }
+      });
+    });
+    
+    // Start observing the html element for theme changes
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-bs-theme']
+    });
   });
 </script>
 
@@ -157,12 +327,17 @@
     margin: 2rem auto;
     background-color: transparent;
     overflow-x: auto;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    transition: background-color 0.3s ease;
   }
   
   /* Ensure diagrams are responsive */
   .mermaid svg {
     max-width: 100%;
     height: auto;
+    display: block;
+    margin: 0 auto;
   }
   
   /* Hide code blocks before conversion (prevent flash of unstyled content) */
@@ -173,15 +348,86 @@
     transition: opacity 0.2s;
   }
   
-  /* Dark mode compatibility */
+  /* Dark mode compatibility - Bootstrap theme aware */
+  [data-bs-theme="dark"] .mermaid {
+    background-color: rgba(33, 37, 41, 0.5);
+    border: 1px solid rgba(108, 117, 125, 0.2);
+  }
+  
+  [data-bs-theme="dark"] .mermaid svg {
+    /* Ensure SVG elements are visible in dark mode */
+    color-scheme: dark;
+  }
+  
+  [data-bs-theme="dark"] .mermaid svg text {
+    fill: #ffffff !important;
+  }
+  
+  [data-bs-theme="dark"] .mermaid svg .node rect,
+  [data-bs-theme="dark"] .mermaid svg .node polygon,
+  [data-bs-theme="dark"] .mermaid svg .cluster rect {
+    fill: #343a40 !important;
+    stroke: #6c757d !important;
+  }
+  
+  [data-bs-theme="dark"] .mermaid svg .edgePath .path {
+    stroke: #6c757d !important;
+  }
+  
+  [data-bs-theme="dark"] .mermaid svg .edgeLabel {
+    background-color: #212529 !important;
+    color: #ffffff !important;
+  }
+  
+  [data-bs-theme="dark"] .mermaid svg .edgeLabel text {
+    fill: #ffffff !important;
+  }
+  
+  /* Light mode styling */
+  [data-bs-theme="light"] .mermaid {
+    background-color: rgba(248, 249, 250, 0.5);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  
+  [data-bs-theme="light"] .mermaid svg text {
+    fill: #212529 !important;
+  }
+  
+  /* Fallback for prefers-color-scheme if data-bs-theme is not set */
   @media (prefers-color-scheme: dark) {
-    .mermaid {
-      filter: brightness(0.9);
+    html:not([data-bs-theme]) .mermaid {
+      background-color: rgba(33, 37, 41, 0.5);
+      border: 1px solid rgba(108, 117, 125, 0.2);
     }
   }
   
+  /* Smooth theme transition */
+  .mermaid svg {
+    transition: opacity 0.3s ease;
+  }
+  
+  /* Loading state */
+  .mermaid:not(:has(svg)) {
+    min-height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .mermaid:not(:has(svg))::after {
+    content: 'Loading diagram...';
+    color: var(--bs-secondary);
+    font-size: 0.875rem;
+  }
+  
   /* Print styles */
   @media print {
+    .mermaid {
+      background-color: transparent !important;
+      border: none !important;
+      page-break-inside: avoid;
+    }
+    
     .mermaid svg {
       max-width: 100% !important;
       page-break-inside: avoid;

data/_includes/core/head.html

@@ -42,6 +42,7 @@
 <script defer src="{{ '/assets/js/halfmoon.js' | relative_url }}"></script>
 <script defer src="{{ '/assets/js/side-bar-folders.js' | relative_url }}"></script>
 <script defer src="{{ '/assets/js/code-copy.js' | relative_url }}"></script>
+<script defer src="{{ '/assets/js/ui-enhancements.js' | relative_url }}"></script>
 
 <!-- ================================ -->
 <!-- THIRD PARTY INTEGRATIONS        -->

data/_includes/landing/landing-install-cards.html

@@ -8,7 +8,7 @@
       <div class="card-body p-4 d-flex flex-column text-center">
         <p class="card-text mb-3">Install the theme as a Ruby gem for classic Jekyll workflows.</p>
         <pre class="bg-dark text-light p-3 rounded mb-3 small text-start overflow-auto"><code>gem install {{ site.resources.rubygems.name | default: 'zer0-mistakes' }}</code></pre>
-        <a class="btn btn-outline-primary btn-sm mt-auto" href="{{ site.resources.rubygems.url | default: '#' }}" target="_blank" rel="noopener">View on RubyGems</a>
+        <a class="btn btn-outline-primary btn-sm mt-auto" href="{{ site.resources.rubygems.url | default: '' | join: '' | default: '#' }}" target="_blank" rel="noopener">View on RubyGems</a>
       </div>
     </div>
   </div>
@@ -20,9 +20,9 @@
       </div>
       <div class="card-body p-4 d-flex flex-column text-center">
         <p class="card-text mb-3">Run locally with zero Ruby setup using Docker.</p>
-        <pre class="bg-dark text-light p-3 rounded mb-3 small text-start overflow-auto"><code>docker pull {{ site.resources.docker.image | default: 'bamr87/zer0-mistakes' }}
-docker run -p 4000:4000 {{ site.resources.docker.image | default: 'bamr87/zer0-mistakes' }}</code></pre>
-        <a class="btn btn-outline-info btn-sm mt-auto" href="{{ site.resources.docker.hub_url | default: '#' }}" target="_blank" rel="noopener">View on Docker Hub</a>
+        <pre class="bg-dark text-light p-3 rounded mb-3 small text-start overflow-auto"><code>docker pull {{ site.resources.docker.image | default: '' | join: '' | default: 'bamr87/zer0-mistakes' }}
+docker run -p 4000:4000 {{ site.resources.docker.image | default: '' | join: '' | default: 'bamr87/zer0-mistakes' }}</code></pre>
+        <a class="btn btn-outline-info btn-sm mt-auto" href="{{ site.resources.docker.hub_url | default: '' | join: '' | default: '#' }}" target="_blank" rel="noopener">View on Docker Hub</a>
       </div>
     </div>
   </div>
@@ -34,11 +34,11 @@ docker run -p 4000:4000 {{ site.resources.docker.image | default: 'bamr87/zer0-m
       </div>
       <div class="card-body p-4 d-flex flex-column text-center">
         <p class="card-text mb-3">Improve the theme by forking the repo and opening a PR.</p>
-        <pre class="bg-dark text-light p-3 rounded mb-3 small text-start overflow-auto"><code>git clone {{ site.resources.github_repo | default: site.github.repository_url }}
+        <pre class="bg-dark text-light p-3 rounded mb-3 small text-start overflow-auto"><code>git clone {{ site.resources.github_repo | default: '' | join: '' | default: site.github.repository_url }}
 cd {{ site.local_repo | default: site.repository_name | default: 'repo' }}
-git remote add upstream {{ site.resources.github_repo | default: site.github.repository_url }}
+git remote add upstream {{ site.resources.github_repo | default: '' | join: '' | default: site.github.repository_url }}
 git checkout -b feature/your-change</code></pre>
-  <a class="btn btn-outline-secondary btn-sm mt-auto" href="{{ site.resources.github_fork | default: site.github.repository_url | append: '/fork' }}" target="_blank" rel="noopener">Fork on GitHub</a>
+  <a class="btn btn-outline-secondary btn-sm mt-auto" href="{{ site.resources.github_fork | default: '' | join: '' | default: site.github.repository_url | append: '/fork' }}" target="_blank" rel="noopener">Fork on GitHub</a>
       </div>
     </div>
   </div>
@@ -46,7 +46,7 @@ git checkout -b feature/your-change</code></pre>
 
 <!-- Contributing guide call-to-action placed below all cards -->
 <div class="text-center mt-4">
-  <a class="btn btn-outline-secondary" href="{{ site.resources.contributing | default: '#' }}" target="_blank" rel="noopener">
+  <a class="btn btn-outline-secondary" href="{{ site.resources.contributing | default: '' | join: '' | default: '#' }}" target="_blank" rel="noopener">
     <i class="bi bi-journal-text me-2"></i>Read the Contributing Guide
   </a>
 </div>

data/_includes/landing/landing-quick-links.html

@@ -3,22 +3,22 @@
   <div class="container-xl px-4 px-md-5">
     <div class="row g-3 justify-content-center text-center align-items-center">
       <div class="col-6 col-md-3 d-flex justify-content-center">
-        <a class="btn btn-outline-light btn-sm w-100" href="{{ site.resources.github_repo | default: site.github.repository_url | default: '/' }}" target="_blank" rel="noopener">
+        <a class="btn btn-outline-light btn-sm w-100" href="{{ site.resources.github_repo | default: '' | join: '' | default: site.github.repository_url | default: '/' }}" target="_blank" rel="noopener">
           <i class="bi bi-github me-2"></i> GitHub
         </a>
       </div>
       <div class="col-6 col-md-3 d-flex justify-content-center">
-        <a class="btn btn-outline-light btn-sm w-100" href="{{ site.resources.rubygems.url | default: '#' }}" target="_blank" rel="noopener">
+        <a class="btn btn-outline-light btn-sm w-100" href="{{ site.resources.rubygems.url | default: '' | join: '' | default: '#' }}" target="_blank" rel="noopener">
           <i class="bi bi-gem me-2"></i> RubyGems
         </a>
       </div>
       <div class="col-6 col-md-3 d-flex justify-content-center">
-        <a class="btn btn-outline-light btn-sm w-100" href="{{ site.resources.docker.hub_url | default: '#' }}" target="_blank" rel="noopener">
+        <a class="btn btn-outline-light btn-sm w-100" href="{{ site.resources.docker.hub_url | default: '' | join: '' | default: '#' }}" target="_blank" rel="noopener">
           <i class="bi bi-box-seam me-2"></i> Docker Hub
         </a>
       </div>
       <div class="col-6 col-md-3 d-flex justify-content-center">
-        <a class="btn btn-outline-light btn-sm w-100" href="{{ site.resources.github_fork | default: site.github.repository_url | append: '/fork' }}" target="_blank" rel="noopener">
+        <a class="btn btn-outline-light btn-sm w-100" href="{{ site.resources.github_fork | default: '' | join: '' | default: site.github.repository_url | append: '/fork' }}" target="_blank" rel="noopener">
           <i class="bi bi-git me-2"></i> Fork Project
         </a>
       </div>

data/_includes/navigation/breadcrumbs.html

@@ -10,14 +10,37 @@
   <ol itemscope itemtype="https://schema.org/BreadcrumbList">
     <i class="bi bi-folder"></i>
     {% assign crumbs = page.url | remove:'/index.html' | split: '/' %}
-    <a href="/">root</a>
-    {% for crumb in crumbs offset: 1 %}
-    {% if forloop.last %}
-    / {{ page.title }}
+    {% assign section = crumbs[1] | default: '' %}
+    <a href="{{ '/' | relative_url }}">root</a>
+
+    {% comment %}
+      Avoid linking to intermediate directories that don't have index pages.
+      Example: posts are /posts/YYYY/MM/DD/slug/ (only /posts/ and the leaf page exist).
+    {% endcomment %}
+    {% if section == 'posts' %}
+      / <a href="{{ '/posts/' | relative_url }}">Posts</a>
+      / {{ page.title }}
+    {% elsif section == 'notebooks' %}
+      / <a href="{{ '/notebooks/' | relative_url }}">Notebooks</a>
+      / {{ page.title }}
+    {% elsif section == 'notes' %}
+      / <a href="{{ '/notes/' | relative_url }}">Notes</a>
+      / {{ page.title }}
+    {% elsif section == 'docs' %}
+      / <a href="{{ '/docs/' | relative_url }}">Docs</a>
+      / {{ page.title }}
     {% else %}
-    / <a href="{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a>
+      {% for crumb in crumbs offset: 1 %}
+        {% if forloop.last %}
+          / {{ page.title }}
+        {% elsif forloop.first %}
+          / <a href="{{ '/' | append: crumb | append: '/' | relative_url }}">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a>
+        {% else %}
+          {% comment %} Keep intermediate crumbs as plain text to avoid dead links {% endcomment %}
+          / {{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}
+        {% endif %}
+      {% endfor %}
     {% endif %}
-    {% endfor %}
   </ol>
 </nav>
 <!-- Secret Search bar  -->

data/_includes/navigation/nav-tree.html

@@ -0,0 +1,181 @@
+<!--
+  ===================================================================
+  NAV TREE - Flat YAML Navigation Renderer
+  ===================================================================
+  
+  File: nav-tree.html
+  Path: _includes/navigation/nav-tree.html
+  Purpose: Render hierarchical navigation from YAML data files
+  
+  Parameters:
+  - nav: Name of navigation file in _data/navigation/ (e.g., "docs", "main")
+  
+  Data Schema (expected in _data/navigation/*.yml):
+  - title: string (required) - Display text
+  - url: string (optional) - Link URL
+  - icon: string (optional) - Bootstrap Icons class (e.g., "bi-folder")
+  - expanded: boolean (optional) - Default expanded state (default: false)
+  - children: array (optional) - Nested navigation items (max 2 levels)
+  
+  Note: This implementation supports 2 levels of nesting to avoid Jekyll's
+  include depth limit. For deeper nesting, consider a plugin approach.
+  
+  Dependencies:
+  - site.data.navigation[nav]: Navigation YAML data
+  - Bootstrap 5 collapse component
+  - Bootstrap Icons for visual indicators
+  
+  Usage:
+  include navigation/nav-tree.html nav="docs"
+  ===================================================================
+-->
+
+{% assign navigation = site.data.navigation[include.nav] %}
+
+{% if navigation %}
+<ul class="list-unstyled fw-normal pb-2 small nav-tree-root">
+  {% for item in navigation %}
+    {% assign item_id = item.title | slugify | prepend: "nav-" %}
+    {% assign is_active = page.url == item.url %}
+    {% assign is_expanded = item.expanded | default: false %}
+    {% assign has_children = item.children and item.children.size > 0 %}
+    
+    <li class="mb-1 nav-tree-item" data-depth="0">
+      {% if has_children %}
+        <!-- Parent item with children - collapsible -->
+        <div class="d-flex align-items-center">
+          {% if item.url %}
+            <a href="{{ item.url | relative_url }}" 
+               class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none{% if is_active %} active{% endif %}">
+              {% if item.icon %}<i class="{{ item.icon }} me-2"></i>{% endif %}
+              <span>{{ item.title }}</span>
+            </a>
+            <button class="btn btn-sm btn-link nav-tree-toggle p-1{% unless is_expanded %} collapsed{% endunless %}"
+                    type="button"
+                    data-bs-toggle="collapse" 
+                    data-bs-target="#{{ item_id }}" 
+                    aria-expanded="{{ is_expanded }}"
+                    aria-controls="{{ item_id }}"
+                    aria-label="Toggle {{ item.title }} submenu">
+              <i class="bi bi-chevron-down"></i>
+            </button>
+          {% else %}
+            <button class="btn btn-link nav-tree-toggle w-100 d-flex align-items-center text-start fw-semibold py-1 px-2{% unless is_expanded %} collapsed{% endunless %}"
+                    type="button"
+                    data-bs-toggle="collapse" 
+                    data-bs-target="#{{ item_id }}" 
+                    aria-expanded="{{ is_expanded }}"
+                    aria-controls="{{ item_id }}">
+              {% if item.icon %}<i class="{{ item.icon }} me-2"></i>{% endif %}
+              <span class="flex-grow-1">{{ item.title }}</span>
+              <i class="bi bi-chevron-down nav-tree-chevron"></i>
+            </button>
+          {% endif %}
+        </div>
+        
+        <!-- Children container (Level 1) -->
+        <div class="collapse{% if is_expanded %} show{% endif %}" id="{{ item_id }}">
+          <ul class="list-unstyled fw-normal ps-3 nav-tree-children">
+            {% for child in item.children %}
+              {% assign child_id = child.title | slugify | prepend: "nav-" %}
+              {% assign child_active = page.url == child.url %}
+              {% assign child_expanded = child.expanded | default: false %}
+              {% assign child_has_children = child.children and child.children.size > 0 %}
+              
+              <li class="mb-1 nav-tree-item" data-depth="1">
+                {% if child_has_children %}
+                  <!-- Level 1 parent with children -->
+                  <div class="d-flex align-items-center">
+                    {% if child.url %}
+                      <a href="{{ child.url | relative_url }}" 
+                         class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none{% if child_active %} active{% endif %}">
+                        {% if child.icon %}<i class="{{ child.icon }} me-2"></i>{% endif %}
+                        <span>{{ child.title }}</span>
+                      </a>
+                      <button class="btn btn-sm btn-link nav-tree-toggle p-1{% unless child_expanded %} collapsed{% endunless %}"
+                              type="button"
+                              data-bs-toggle="collapse" 
+                              data-bs-target="#{{ child_id }}" 
+                              aria-expanded="{{ child_expanded }}"
+                              aria-controls="{{ child_id }}">
+                        <i class="bi bi-chevron-down"></i>
+                      </button>
+                    {% else %}
+                      <button class="btn btn-link nav-tree-toggle w-100 d-flex align-items-center text-start py-1 px-2{% unless child_expanded %} collapsed{% endunless %}"
+                              type="button"
+                              data-bs-toggle="collapse" 
+                              data-bs-target="#{{ child_id }}" 
+                              aria-expanded="{{ child_expanded }}"
+                              aria-controls="{{ child_id }}">
+                        {% if child.icon %}<i class="{{ child.icon }} me-2"></i>{% endif %}
+                        <span class="flex-grow-1">{{ child.title }}</span>
+                        <i class="bi bi-chevron-down nav-tree-chevron"></i>
+                      </button>
+                    {% endif %}
+                  </div>
+                  
+                  <!-- Children container (Level 2) -->
+                  <div class="collapse{% if child_expanded %} show{% endif %}" id="{{ child_id }}">
+                    <ul class="list-unstyled fw-normal ps-3 nav-tree-children">
+                      {% for grandchild in child.children %}
+                        {% assign gc_active = page.url == grandchild.url %}
+                        <li class="mb-1 nav-tree-item" data-depth="2">
+                          {% if grandchild.url %}
+                            <a href="{{ grandchild.url | relative_url }}" 
+                               class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none{% if gc_active %} active{% endif %}">
+                              {% if grandchild.icon %}<i class="{{ grandchild.icon }} me-2"></i>{% endif %}
+                              <span>{{ grandchild.title }}</span>
+                            </a>
+                          {% else %}
+                            <span class="nav-tree-text d-inline-flex align-items-center py-1 px-2 text-muted">
+                              {% if grandchild.icon %}<i class="{{ grandchild.icon }} me-2"></i>{% endif %}
+                              <span>{{ grandchild.title }}</span>
+                            </span>
+                          {% endif %}
+                        </li>
+                      {% endfor %}
+                    </ul>
+                  </div>
+                {% else %}
+                  <!-- Level 1 leaf item -->
+                  {% if child.url %}
+                    <a href="{{ child.url | relative_url }}" 
+                       class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none{% if child_active %} active{% endif %}">
+                      {% if child.icon %}<i class="{{ child.icon }} me-2"></i>{% endif %}
+                      <span>{{ child.title }}</span>
+                    </a>
+                  {% else %}
+                    <span class="nav-tree-text d-inline-flex align-items-center py-1 px-2 text-muted">
+                      {% if child.icon %}<i class="{{ child.icon }} me-2"></i>{% endif %}
+                      <span>{{ child.title }}</span>
+                    </span>
+                  {% endif %}
+                {% endif %}
+              </li>
+            {% endfor %}
+          </ul>
+        </div>
+      {% else %}
+        <!-- Root level leaf item -->
+        {% if item.url %}
+          <a href="{{ item.url | relative_url }}" 
+             class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none{% if is_active %} active{% endif %}">
+            {% if item.icon %}<i class="{{ item.icon }} me-2"></i>{% endif %}
+            <span>{{ item.title }}</span>
+          </a>
+        {% else %}
+          <span class="nav-tree-text d-inline-flex align-items-center py-1 px-2 text-muted">
+            {% if item.icon %}<i class="{{ item.icon }} me-2"></i>{% endif %}
+            <span>{{ item.title }}</span>
+          </span>
+        {% endif %}
+      {% endif %}
+    </li>
+  {% endfor %}
+</ul>
+{% else %}
+<p class="text-muted small">
+  <i class="bi bi-exclamation-triangle me-1"></i>
+  Navigation "{{ include.nav }}" not found in _data/navigation/
+</p>
+{% endif %}