jekyll-theme-zer0 0.16.0 → 0.17.0

data/_data/navigation/README.md

@@ -0,0 +1,54 @@
+# Navigation Data Schema Documentation
+# ===================================
+#
+# This directory contains YAML navigation data files used by the sidebar
+# and navbar components. All files follow a standardized schema.
+#
+# ## Schema Definition
+#
+# Each navigation item can have the following properties:
+#
+# ```yaml
+# - title: string        # Required - Display text
+#   url: string          # Optional - Link URL (relative to site root)
+#   icon: string         # Optional - Bootstrap Icons class (e.g., "bi-folder")
+#   description: string  # Optional - Tooltip or description text
+#   expanded: boolean    # Optional - Default expanded state (default: false)
+#   children: array      # Optional - Nested navigation items (recursive)
+# ```
+#
+# ## Navigation Modes
+#
+# The sidebar supports three navigation modes set via `page.sidebar.nav`:
+#
+# 1. **auto** - Auto-generates from collection documents
+# 2. **tree** - Uses YAML data from this directory
+# 3. **categories** - Groups by Jekyll categories
+#
+# ## Available Files
+#
+# - main.yml      - Primary site navigation (navbar)
+# - docs.yml      - Documentation section navigation
+# - about.yml     - About section navigation
+# - quickstart.yml - Quick start guide navigation
+# - home.yml      - Homepage quick links
+# - posts.yml     - Blog category navigation
+#
+# ## Example Usage
+#
+# In page front matter:
+# ```yaml
+# sidebar:
+#   nav: docs  # Uses _data/navigation/docs.yml
+# ```
+#
+# ## Schema Validation
+#
+# Navigation YAML is validated at build time by _plugins/navigation_validator.rb
+# Invalid schemas will produce build warnings.
+#
+# ## Migration Notes (v2.0)
+#
+# - Renamed `sublinks` to `children` for consistency with tree terminology
+# - Added `expanded` property for default state
+# - Navigation modes changed: dynamic→auto, searchCats→categories

data/_data/navigation/about.yml

@@ -1,11 +1,13 @@
 # About Navigation Configuration
-# Used by: About section sidebar and related pages
+# Used by: About section sidebar (nav: tree)
 # Purpose: Navigation for about pages, features, settings, and site info
+# Schema: See README.md for full documentation
 
 - title: About
   icon: bi-info-circle
   url: /about/
-  sublinks:
+  expanded: true
+  children:
     - title: Overview
       url: /about/
     - title: Features
@@ -16,7 +18,7 @@
 - title: Site Info
   icon: bi-bar-chart
   url: /about/stats/
-  sublinks:
+  children:
     - title: Statistics
       url: /about/stats/
     - title: Site Map
@@ -27,14 +29,14 @@
 - title: Settings
   icon: bi-gear
   url: /about/config/
-  sublinks:
+  children:
     - title: Configuration
       url: /about/config/
 
 - title: Legal
   icon: bi-file-text
   url: /terms-of-service/
-  sublinks:
+  children:
     - title: Terms of Service
       url: /terms-of-service/
     - title: Privacy Policy

data/_data/navigation/docs.yml

@@ -1,57 +1,103 @@
 # Documentation Navigation Configuration
-# Used by: Docs sidebar and documentation pages
-# Purpose: Organize documentation by topic area
+# Used by: Docs sidebar (nav: tree)
+# Purpose: Organize documentation by topic area for _docs collection
+# Schema: See README.md for full documentation
 
+# ============================================================
+# Getting Started
+# ============================================================
+- title: Getting Started
+  icon: bi-rocket-takeoff
+  url: /docs/
+  expanded: true
+  children:
+    - title: Documentation Home
+      url: /docs/
+    - title: Installation
+      url: /docs/installation/
+    - title: Troubleshooting
+      url: /docs/troubleshooting/
+
+# ============================================================
+# Core Technologies
+# ============================================================
 - title: Jekyll
   icon: bi-journal-code
   url: /docs/jekyll/
-  sublinks:
-    - title: Jekyll Guide
+  children:
+    - title: Jekyll Overview
       url: /docs/jekyll/
-    - title: Mermaid Diagrams
-      url: /docs/jekyll/mermaid-native-markdown/
-    - title: Math with MathJax
-      url: /docs/jekyll/jekyll-math-symbols-with-mathjax/
+    - title: Configuration
+      url: /docs/jekyll/jekyll-config/
+    - title: Front Matter
+      url: /docs/front-matter/
     - title: Liquid Templating
       url: /docs/jekyll/jekyll-liquid/
-    - title: Frontmatter CMS
-      url: /docs/jekyll/jekyll-frontmatter-cms/
     - title: Syntax Highlighting
       url: /docs/jekyll/jekyll-highlighting/
+    - title: Performance
+      url: /docs/jekyll/jekyll-performance-optimization/
+    - title: Security
+      url: /docs/jekyll/jekyll-security/
+
+- title: Ruby & Bundler
+  icon: bi-gem
+  url: /docs/ruby/
+  children:
+    - title: Ruby Overview
+      url: /docs/ruby/
+    - title: Ruby 101
+      url: /docs/ruby-101/
+
+- title: Liquid
+  icon: bi-droplet
+  url: /docs/liquid/
+  children:
+    - title: Liquid Overview
+      url: /docs/liquid/
 
+- title: Docker
+  icon: bi-box-seam
+  url: /docs/docker/
+  children:
+    - title: Docker Overview
+      url: /docs/docker/
+
+- title: Bootstrap
+  icon: bi-bootstrap
+  url: /docs/bootstrap/
+  children:
+    - title: Bootstrap Overview
+      url: /docs/bootstrap/
+
+# ============================================================
+# Theme Features
+# ============================================================
 - title: Features
   icon: bi-stars
-  url: /about/features/
-  sublinks:
+  url: /features/
+  children:
     - title: All Features
-      url: /about/features/
+      url: /features/
+    - title: Mermaid Diagrams
+      url: /docs/jekyll/mermaid-native-markdown/
+    - title: Math with MathJax
+      url: /docs/jekyll/jekyll-math-symbols-with-mathjax/
     - title: Preview Image Generator
       url: /docs/features/preview-image-generator/
-    - title: Statistics Dashboard
-      url: /about/features/statistics-dashboard/
-    - title: AI Development Guide
-      url: /about/features/ai-development-guide/
+    - title: Frontmatter CMS
+      url: /docs/jekyll/jekyll-frontmatter-cms/
 
+# ============================================================
+# Deployment
+# ============================================================
 - title: Deployment
   icon: bi-cloud-upload
   url: /quickstart/github-setup/
-  sublinks:
+  children:
     - title: GitHub Pages
       url: /quickstart/github-setup/
     - title: Netlify
       url: /docs/jekyll/deploying-jekyll-website-to-netlify/
     - title: Custom Domain
       url: /docs/jekyll/deploying-personal-website-with-custom-domain/
-
-- title: Configuration
-  icon: bi-gear
-  url: /about/config/
-  sublinks:
-    - title: Site Config
-      url: /about/config/
-    - title: Jekyll Config
-      url: /docs/jekyll/jekyll-config/
-    - title: Performance
-      url: /docs/jekyll/jekyll-performance-optimization/
-    - title: Security
-      url: /docs/jekyll/jekyll-security/

data/_data/navigation/home.yml

@@ -1,11 +1,12 @@
 # Home Navigation Configuration
 # Used by: Header navigation and homepage quick links
 # Purpose: Quick access links for the home/landing area
+# Schema: See README.md for full documentation
 
 - title: Home
   icon: bi-house
   url: /
-  sublinks:
+  children:
     - title: Blog
       url: /blog/
     - title: Quick Start
@@ -14,7 +15,7 @@
 - title: Discover
   icon: bi-compass
   url: /sitemap/
-  sublinks:
+  children:
     - title: Site Map
       url: /sitemap/
     - title: Categories
@@ -25,7 +26,7 @@
 - title: Connect
   icon: bi-envelope
   url: /contact/
-  sublinks:
+  children:
     - title: Contact
       url: /contact/
     - title: About

data/_data/navigation/main.yml

@@ -1,11 +1,12 @@
 # Main Navigation Configuration
 # Used by: _includes/navigation/navbar.html
-# Purpose: Primary site navigation with dropdown sublinks
+# Purpose: Primary site navigation with dropdown children
+# Schema: See README.md for full documentation
 
 - title: Quick Start
   icon: bi-rocket-takeoff
   url: /quickstart/
-  sublinks:
+  children:
     - title: Machine Setup
       url: /quickstart/machine-setup/
     - title: Jekyll Setup
@@ -16,7 +17,7 @@
 - title: Blog
   icon: bi-journal-text
   url: /blog/
-  sublinks:
+  children:
     - title: All Posts
       url: /posts/
     - title: Categories
@@ -27,18 +28,26 @@
 - title: Docs
   icon: bi-journal-bookmark
   url: /docs/
-  sublinks:
+  children:
+    - title: Documentation Home
+      url: /docs/
+    - title: Installation
+      url: /docs/installation/
     - title: Jekyll Guide
       url: /docs/jekyll/
+    - title: Docker
+      url: /docs/docker/
     - title: Features
-      url: /about/features/
+      url: /features/
+    - title: Troubleshooting
+      url: /docs/troubleshooting/
 
 - title: About
   icon: bi-info-circle
   url: /about/
-  sublinks:
+  children:
     - title: Features
-      url: /about/features/
+      url: /features/
     - title: Statistics
       url: /about/stats/
     - title: Config

data/_data/navigation/quickstart.yml

@@ -1,12 +1,14 @@
 # Quick Start Navigation Configuration
-# Used by: Quick Start sidebar and related pages
+# Used by: Quick Start sidebar (nav: tree)
 # Purpose: Step-by-step guide navigation for new users
 # Order: Overview → Machine → Jekyll → GitHub → Personalization
+# Schema: See README.md for full documentation
 
 - title: "Quick Start"
   icon: bi-flag
   url: /quickstart/
-  sublinks:
+  expanded: true
+  children:
     - title: "1. Machine Setup"
       url: /quickstart/machine-setup/
       icon: bi-laptop

data/_includes/components/js-cdn.html

@@ -28,5 +28,5 @@
         integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" 
         crossorigin="anonymous"></script>
 
-<!-- Sidebar Navigation Enhancements - Deferred for performance -->
-<script defer src="{{ '/assets/js/sidebar.js' | relative_url }}"></script>
+<!-- Navigation ES6 Modules - Enhanced sidebar, scroll spy, keyboard shortcuts, gestures -->
+<script type="module" src="{{ '/assets/js/modules/navigation/index.js' | relative_url }}"></script>

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 %}