@docmd/ui 0.4.0

package/assets/js/docmd-image-lightbox.js

@@ -0,0 +1,74 @@
+// Source file from the docmd project — https://github.com/docmd-io/docmd
+
+/* 
+ * A simple lightbox implementation for gallery images
+ */
+
+document.addEventListener('DOMContentLoaded', function () {
+  // Create lightbox elements
+  const lightbox = document.createElement('div');
+  lightbox.className = 'docmd-lightbox';
+  lightbox.innerHTML = `
+    <div class="docmd-lightbox-content">
+      <img src="" alt="">
+      <div class="docmd-lightbox-caption"></div>
+    </div>
+    <div class="docmd-lightbox-close">&times;</div>
+  `;
+  document.body.appendChild(lightbox);
+
+  const lightboxImg = lightbox.querySelector('img');
+  const lightboxCaption = lightbox.querySelector('.docmd-lightbox-caption');
+  const lightboxClose = lightbox.querySelector('.docmd-lightbox-close');
+
+  // Find all images with lightbox class or in image galleries
+  const lightboxImages = document.querySelectorAll('img.lightbox, .image-gallery img');
+
+  // Add click event to each image
+  lightboxImages.forEach(function (img) {
+    img.style.cursor = 'zoom-in';
+
+    img.addEventListener('click', function () {
+      // Get the image source and caption
+      const src = this.getAttribute('src');
+      let caption = this.getAttribute('alt') || '';
+
+      // If image is inside a figure with figcaption, use that caption
+      const figure = this.closest('figure');
+      if (figure) {
+        const figcaption = figure.querySelector('figcaption');
+        if (figcaption) {
+          caption = figcaption.textContent;
+        }
+      }
+
+      // Set the lightbox content
+      lightboxImg.setAttribute('src', src);
+      lightboxCaption.textContent = caption;
+
+      // Show the lightbox
+      lightbox.style.display = 'flex';
+      document.body.style.overflow = 'hidden'; // Prevent scrolling
+    });
+  });
+
+  // Close lightbox when clicking the close button or outside the image
+  lightboxClose.addEventListener('click', closeLightbox);
+  lightbox.addEventListener('click', function (e) {
+    if (e.target === lightbox) {
+      closeLightbox();
+    }
+  });
+
+  // Close lightbox when pressing Escape key
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape' && lightbox.style.display === 'flex') {
+      closeLightbox();
+    }
+  });
+
+  function closeLightbox() {
+    lightbox.style.display = 'none';
+    document.body.style.overflow = ''; // Restore scrolling
+  }
+}); 

package/assets/js/docmd-main.js

@@ -0,0 +1,276 @@
+// Source file from the docmd project — https://github.com/docmd-io/docmd
+
+/* 
+ * Main client-side script for docmd UI interactions
+ */
+
+// --- Collapsible Navigation Logic ---
+function initializeCollapsibleNav() {
+  const nav = document.querySelector('.sidebar-nav');
+  if (!nav) return;
+
+  // 1. Initial Cleanup (ensure classes match aria states)
+  nav.querySelectorAll('li.collapsible').forEach(item => {
+      // If server rendered it as expanded, ensure aria matches
+      if (item.classList.contains('expanded')) {
+          item.setAttribute('aria-expanded', 'true');
+      } else {
+          item.setAttribute('aria-expanded', 'false');
+      }
+  });
+
+  // 2. Event Delegation
+  nav.addEventListener('click', (e) => {
+    // Check if the click target is the arrow or inside the arrow wrapper
+    const arrow = e.target.closest('.collapse-icon-wrapper');
+    
+    if (arrow) {
+      // STOP everything. Do not follow the link.
+      e.preventDefault();
+      e.stopPropagation();
+
+      const item = arrow.closest('li.collapsible');
+      if (item) {
+        // Toggle State
+        const isExpanded = item.classList.contains('expanded');
+        
+        if (isExpanded) {
+            item.classList.remove('expanded');
+            item.setAttribute('aria-expanded', 'false');
+        } else {
+            item.classList.add('expanded');
+            item.setAttribute('aria-expanded', 'true');
+        }
+      }
+      return false;
+    }
+  });
+}
+
+// --- Mobile Menu Logic ---
+function initializeMobileMenus() {
+  const sidebarBtn = document.querySelector('.sidebar-menu-button');
+  const sidebar = document.querySelector('.sidebar');
+  
+  if (sidebarBtn && sidebar) {
+    sidebarBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      sidebar.classList.toggle('mobile-expanded');
+    });
+  }
+
+  const tocBtn = document.querySelector('.toc-menu-button');
+  const tocContainer = document.querySelector('.toc-container');
+  const tocTitle = document.querySelector('.toc-title');
+
+  const toggleToc = (e) => {
+    if (window.getComputedStyle(tocBtn).display === 'none') return;
+    e.stopPropagation();
+    tocContainer.classList.toggle('mobile-expanded');
+  };
+
+  if (tocBtn && tocContainer) {
+    tocBtn.addEventListener('click', toggleToc);
+    if (tocTitle) tocTitle.addEventListener('click', toggleToc);
+  }
+}
+
+// --- Sidebar Scroll Preservation (Instant Center) ---
+function initializeSidebarScroll() {
+  const sidebar = document.querySelector('.sidebar');
+  if (!sidebar) return;
+
+  // Wait for the layout to be stable
+  requestAnimationFrame(() => {
+    // Find the active link
+    const activeElement = sidebar.querySelector('a.active');
+
+    if (activeElement) {
+      activeElement.scrollIntoView({
+        behavior: 'auto', // INSTANT jump (prevents scrolling animation jitter)
+        block: 'center',  // Center it vertically in the sidebar
+        inline: 'nearest'
+      });
+    }
+  });
+}
+
+// --- Theme Toggle Logic ---
+function setupThemeToggleListener() {
+  const toggleButtons = document.querySelectorAll('.theme-toggle-button');
+
+  function applyTheme(theme) {
+    const validThemes = ['light', 'dark'];
+    const selectedTheme = validThemes.includes(theme) ? theme : 'light';
+
+    // 1. Update DOM & Storage
+    document.documentElement.setAttribute('data-theme', selectedTheme);
+    document.body.setAttribute('data-theme', selectedTheme);
+    localStorage.setItem('docmd-theme', selectedTheme);
+
+    // 2. Toggle Highlight.js Stylesheets
+    const lightLink = document.getElementById('hljs-light');
+    const darkLink = document.getElementById('hljs-dark');
+
+    if (lightLink && darkLink) {
+        if (selectedTheme === 'dark') {
+            lightLink.disabled = true;
+            darkLink.disabled = false;
+        } else {
+            lightLink.disabled = false;
+            darkLink.disabled = true;
+        }
+    }
+  }
+
+  toggleButtons.forEach(btn => {
+    // Clone button to remove old listeners if any (safety measure)
+    const newBtn = btn.cloneNode(true);
+    btn.parentNode.replaceChild(newBtn, btn);
+    
+    newBtn.addEventListener('click', () => {
+      const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
+      const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+      applyTheme(newTheme);
+    });
+  });
+}
+
+// --- Sidebar Collapse Logic ---
+function initializeSidebarToggle() {
+  const toggleButton = document.getElementById('sidebar-toggle-button');
+  const body = document.body;
+
+  if (!body.classList.contains('sidebar-collapsible') || !toggleButton) return;
+
+  const defaultConfigCollapsed = body.dataset.defaultCollapsed === 'true';
+  let isCollapsed = localStorage.getItem('docmd-sidebar-collapsed');
+
+  if (isCollapsed === null) isCollapsed = defaultConfigCollapsed;
+  else isCollapsed = isCollapsed === 'true';
+
+  if (isCollapsed) body.classList.add('sidebar-collapsed');
+
+  toggleButton.addEventListener('click', () => {
+    body.classList.toggle('sidebar-collapsed');
+    const currentlyCollapsed = body.classList.contains('sidebar-collapsed');
+    localStorage.setItem('docmd-sidebar-collapsed', currentlyCollapsed);
+  });
+}
+
+// --- Tabs Container Logic ---
+function initializeTabs() {
+  document.querySelectorAll('.docmd-tabs').forEach(tabsContainer => {
+    const navItems = tabsContainer.querySelectorAll('.docmd-tabs-nav-item');
+    const tabPanes = tabsContainer.querySelectorAll('.docmd-tab-pane');
+
+    navItems.forEach((navItem, index) => {
+      navItem.addEventListener('click', () => {
+        navItems.forEach(item => item.classList.remove('active'));
+        tabPanes.forEach(pane => pane.classList.remove('active'));
+
+        navItem.classList.add('active');
+        if (tabPanes[index]) tabPanes[index].classList.add('active');
+      });
+    });
+  });
+}
+
+// --- Copy Code Button Logic ---
+function initializeCopyCodeButtons() {
+  if (document.body.dataset.copyCodeEnabled !== 'true') return;
+
+  const copyIconSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>`;
+  const checkIconSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
+
+  document.querySelectorAll('pre').forEach(preElement => {
+    const codeElement = preElement.querySelector('code');
+    if (!codeElement) return;
+
+    const wrapper = document.createElement('div');
+    wrapper.style.position = 'relative';
+    wrapper.style.display = 'block';
+
+    preElement.parentNode.insertBefore(wrapper, preElement);
+    wrapper.appendChild(preElement);
+    preElement.style.position = 'static';
+
+    const copyButton = document.createElement('button');
+    copyButton.className = 'copy-code-button';
+    copyButton.innerHTML = copyIconSvg;
+    copyButton.setAttribute('aria-label', 'Copy code to clipboard');
+    wrapper.appendChild(copyButton);
+
+    copyButton.addEventListener('click', () => {
+      navigator.clipboard.writeText(codeElement.innerText).then(() => {
+        copyButton.innerHTML = checkIconSvg;
+        copyButton.classList.add('copied');
+        setTimeout(() => {
+          copyButton.innerHTML = copyIconSvg;
+          copyButton.classList.remove('copied');
+        }, 2000);
+      }).catch(err => {
+        console.error('Failed to copy text: ', err);
+        copyButton.innerText = 'Error';
+      });
+    });
+  });
+}
+
+// --- Theme Sync Function ---
+function syncBodyTheme() {
+  const currentTheme = document.documentElement.getAttribute('data-theme');
+  if (currentTheme && document.body) {
+    document.body.setAttribute('data-theme', currentTheme);
+  }
+}
+
+// --- Scroll Spy Logic ---
+function initializeScrollSpy() {
+  const tocLinks = document.querySelectorAll('.toc-link');
+  const headings = document.querySelectorAll('.main-content h2, .main-content h3');
+  
+  if (tocLinks.length === 0 || headings.length === 0) return;
+
+  const observerOptions = {
+    root: null,
+    // Trigger when heading crosses the top 10% of screen
+    rootMargin: '-10% 0px -80% 0px', 
+    threshold: 0
+  };
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        // 1. Clear current active state
+        tocLinks.forEach(link => link.classList.remove('active'));
+        
+        // 2. Find link corresponding to this heading
+        const id = entry.target.getAttribute('id');
+        const activeLink = document.querySelector(`.toc-link[href="#${id}"]`);
+        
+        if (activeLink) {
+            activeLink.classList.add('active');
+            
+            // Optional: Auto-scroll the TOC sidebar itself if needed
+            // activeLink.scrollIntoView({ block: 'nearest' });
+        }
+      }
+    });
+  }, observerOptions);
+
+  headings.forEach(heading => observer.observe(heading));
+}
+
+// --- Main Execution ---
+document.addEventListener('DOMContentLoaded', () => {
+  syncBodyTheme();
+  setupThemeToggleListener();
+  initializeSidebarToggle();
+  initializeTabs();
+  initializeCopyCodeButtons();
+  initializeCollapsibleNav();
+  initializeMobileMenus();
+  initializeSidebarScroll();
+  initializeScrollSpy();
+});

package/index.js

@@ -0,0 +1,11 @@
+const path = require('path');
+
+module.exports = {
+    getTemplatesDir: () => path.join(__dirname, 'templates'),
+    getAssetsDir: () => path.join(__dirname, 'assets'),
+    // Helper to resolve template paths
+    getTemplatePath: (name) => {
+        const fileName = name.endsWith('.ejs') ? name : `${name}.ejs`;
+        return path.join(__dirname, 'templates', fileName);
+    }
+};

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@docmd/ui",
+  "version": "0.4.0",
+  "description": "Base UI templates and assets for docmd",
+  "main": "index.js",
+  "files": [
+    "templates",
+    "assets",
+    "index.js"
+  ],
+  "license": "MIT"
+}

package/templates/layout.ejs

@@ -0,0 +1,195 @@
+<%# packages/ui/templates/layout.ejs %>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- Define Globals -->
+    <script>
+        var root = "<%= relativePathToRoot %>";
+        if (root && !root.endsWith('/')) root += '/';
+        if (root === '') root = './';
+        window.DOCMD_ROOT = root;
+        window.DOCMD_DEFAULT_MODE = "<%= defaultMode %>";
+    </script>
+
+    <title><%= pageTitle %></title>
+
+    <!-- Favicon -->
+    <%- faviconLinkHtml || '' %>
+    
+    <!-- 1. CORE STYLES (Foundation) -->
+    <link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/docmd-main.css?v=<%= buildHash %>">
+
+    <!-- 2. HIGHLIGHT.JS (Toggle Strategy) -->
+    <% if (config.theme?.codeHighlight !== false) { 
+       const isDarkDefault = defaultMode === 'dark';
+    %>
+    <link rel="stylesheet" 
+          href="<%= relativePathToRoot %>assets/css/docmd-highlight-light.css?v=<%= buildHash %>" 
+          id="hljs-light" 
+          <%= isDarkDefault ? 'disabled' : '' %>>
+          
+    <link rel="stylesheet" 
+          href="<%= relativePathToRoot %>assets/css/docmd-highlight-dark.css?v=<%= buildHash %>" 
+          id="hljs-dark" 
+          <%= isDarkDefault ? '' : 'disabled' %>>
+    <% } %>
+
+    <!-- 3. PLUGINS & THEMES (Overrides Core) -->
+    <!-- This includes 'docmd-theme-sky.css' injected by build.js -->
+    <%- pluginHeadScriptsHtml || '' %>
+
+    <!-- 4. CUSTOM CSS (Overrides Everything) -->
+    <% (customCssFiles || []).forEach(cssFile => { %>
+    <link rel="stylesheet" href="<%= relativePathToRoot %><%- cssFile.startsWith('/') ? cssFile.substring(1) : cssFile %>?v=<%= buildHash %>">
+    <% }); %>
+
+    <!-- Theme Init Script (Must be after styles to prevent FOUC) -->
+    <%- themeInitScript %>
+</head>
+<body class="<%= sidebarConfig.collapsible ? 'sidebar-collapsible' : 'sidebar-not-collapsible' %>" 
+      data-default-collapsed="<%= sidebarConfig.defaultCollapsed %>" 
+      data-copy-code-enabled="<%= config.copyCode === true %>">
+
+    <aside class="sidebar">
+        <div class="sidebar-header">
+            <% if (logo && logo.light && logo.dark) { %>
+            <a href="<%= logo.href || relativePathToRoot %>" class="logo-link">
+                <img src="<%= relativePathToRoot %><%- logo.light.startsWith('/') ? logo.light.substring(1) : logo.light %>" alt="<%= logo.alt || siteTitle %>" class="logo-light" <% if (logo.height) { %>style="height: <%= logo.height %>;"<% } %>>
+                <img src="<%= relativePathToRoot %><%- logo.dark.startsWith('/') ? logo.dark.substring(1) : logo.dark %>" alt="<%= logo.alt || siteTitle %>" class="logo-dark" <% if (logo.height) { %>style="height: <%= logo.height %>;"<% } %>>
+            </a>
+            <% } else { %>
+            <h1><a href="<%= relativePathToRoot %>index.html"><%= siteTitle %></a></h1>
+            <% } %>
+            <span class="mobile-view sidebar-menu-button float-right">
+                <%- renderIcon("ellipsis-vertical") %>
+            </span>
+        </div>
+
+        <%- navigationHtml %>
+
+        <% if (theme && theme.enableModeToggle && theme.positionMode !== 'top') { %>
+        <button id="theme-toggle-button" aria-label="Toggle theme" class="theme-toggle-button">
+            <%- renderIcon('sun', { class: 'icon-sun' }) %> <%- renderIcon('moon', { class: 'icon-moon' }) %>
+        </button>
+        <% } %>
+    </aside>
+
+    <div class="main-content-wrapper">
+        <div class="page-header">
+            <div class="header-left">
+                <% if (sidebarConfig.collapsible) { %>
+                <button id="sidebar-toggle-button" class="sidebar-toggle-button" aria-label="Toggle Sidebar">
+                    <%- renderIcon('panel-left-close') %>
+                </button>
+                <% } %>
+                <h1><%= pageTitle %></h1>
+            </div>
+            <% if (theme && theme.enableModeToggle && theme.positionMode === 'top') { %>
+            <div class="header-right">
+
+                <!-- SEARCH BUTTON -->
+                <% if (config.search !== false) { %>
+                <button class="docmd-search-trigger" aria-label="Search">
+                    <%- renderIcon('search') %>
+                    <span class="search-label">Search</span>
+                    <span class="search-keys"><kbd class="docmd-kbd">⌘</kbd><kbd class="docmd-kbd">k</kbd></span>
+                </button>
+                <% } %>
+
+                <!-- THEME TOGGLE -->
+                <button id="theme-toggle-button" aria-label="Toggle theme" class="theme-toggle-button theme-toggle-header">
+                    <%- renderIcon('sun', { class: 'icon-sun' }) %> <%- renderIcon('moon', { class: 'icon-moon' }) %>
+                </button>
+
+                <!-- SPONSOR BUTTON -->
+                <% if (sponsor && sponsor.enabled) { %>
+                <a href="<%= sponsor.link %>" target="_blank" rel="noopener noreferrer" aria-label="Sponsor Project">
+                    <button class="sponsor-link-button" aria-label="Sponsor">
+                    <%- renderIcon('heart', { class: 'sponsor-icon' }) %>
+                    </button>
+                </a>
+                <% } %>
+            </div>
+            <% } %>
+        </div>
+
+        <main class="content-area">
+            <div class="content-layout">
+                <div class="main-content">
+                    <%- content %>
+
+                    <% if (config.pageNavigation && (prevPage || nextPage)) { %>
+                    <div class="page-navigation">
+                        <% if (prevPage) { %>
+                        <a href="<%= prevPage.url %>" class="prev-page">
+                            <%- renderIcon('arrow-left', { class: 'page-nav-icon' }) %>
+                            <span><small>Previous</small><strong><%= prevPage.title %></strong></span>
+                        </a>
+                        <% } else { %><div class="prev-page-placeholder"></div><% } %>
+                        <% if (nextPage) { %>
+                        <a href="<%= nextPage.url %>" class="next-page">
+                            <span><small>Next</small><strong><%= nextPage.title %></strong></span>
+                            <%- renderIcon('arrow-right', { class: 'page-nav-icon' }) %>
+                        </a>
+                        <% } else { %><div class="next-page-placeholder"></div><% } %>
+                    </div>
+                    <% } %>
+                </div>
+
+                <div class="toc-sidebar">
+                    <%- include('toc', { content, headings, navigationHtml, isActivePage }) %>
+                </div>
+            </div>
+
+            <div class="page-footer-actions">
+                <% if (locals.editUrl) { %>
+                <a href="<%= editUrl %>" target="_blank" rel="noopener noreferrer" class="edit-link">
+                    <%- renderIcon('pencil') %> <%= editLinkText %>
+                </a>
+                <% } %>
+            </div>
+        </main>
+
+        <footer class="page-footer">
+            <div class="footer-content">
+                <div class="user-footer"><%- footerHtml || '' %></div>
+                <div class="branding-footer">
+                    Build with <a href="https://docmd.io" target="_blank" rel="noopener">docmd.</a>
+                </div>
+            </div>
+        </footer>
+    </div>
+
+    <% if (config.search !== false) { %>
+    <!-- Search Modal -->
+    <div id="docmd-search-modal" class="docmd-search-modal" style="display: none;">
+        <div class="docmd-search-box">
+            <div class="docmd-search-header">
+                <%- renderIcon('search') %>
+                <input type="text" id="docmd-search-input" placeholder="Search documentation..." autocomplete="off" spellcheck="false">
+                <button onclick="window.closeDocmdSearch()" class="docmd-search-close" aria-label="Close search">
+                    <%- renderIcon('x') %>
+                </button>
+            </div>
+            <div id="docmd-search-results" class="docmd-search-results"></div>
+            <div class="docmd-search-footer">
+                <span><kbd class="docmd-kbd">↑</kbd> <kbd class="docmd-kbd">↓</kbd> to navigate</span>
+                <span><kbd class="docmd-kbd">ESC</kbd> to close</span>
+            </div>
+        </div>
+    </div>
+    <% } %>
+
+    <!-- Plugin Scripts -->
+    <%- pluginBodyScriptsHtml || '' %>
+
+    <!-- User Custom JS (Sanitized) -->
+    <% (customJsFiles || []).forEach(jsFile => { 
+       if (jsFile && jsFile.trim() !== '') { %>
+    <script src="<%= relativePathToRoot %><%- jsFile.startsWith('/') ? jsFile.substring(1) : jsFile %>"></script>
+    <% } }); %>
+</body>
+</html>

package/templates/navigation.ejs

@@ -0,0 +1,92 @@
+<%# packages/ui/templates/navigation.ejs %>
+
+<nav class="sidebar-nav" aria-label="Main navigation">
+  <ul>
+    <%
+      function normalizePath(p) {
+        if (!p || p === '#') return '#';
+        if (p.startsWith('http')) return p;
+        
+        // 1. Strip dot-slash and leading slash
+        let path = p.replace(/^(\.\/|\/)+/, '');
+        
+        // 2. Remove extensions and index
+        path = path.replace(/(\/index\.html|index\.html|\.html|\.md)$/, '');
+        
+        // 3. CRITICAL: Remove trailing slash for consistency
+        path = path.replace(/\/$/, '');
+        
+        // 4. Return with leading slash for comparison
+        return '/' + path;
+      }
+
+      function isChildActive(item, currentPath) {
+        if (!item.children) return false;
+        const currentNorm = normalizePath(currentPath);
+        return item.children.some(child => {
+           const childNorm = normalizePath(child.path);
+           // Exact match or if the child itself has active children (recursion)
+           if (childNorm === currentNorm) return true;
+           return isChildActive(child, currentPath);
+        });
+      }
+
+      function renderNav(items) {
+        if (!items || !Array.isArray(items)) return;
+        
+        items.forEach(item => {
+          const isExternal = item.external || false;
+          // An item is collapsible if it has children, unless explicitly set to false
+          const isCollapsible = item.children && item.children.length > 0 && item.collapsible !== false;
+          
+          const itemNorm = normalizePath(item.path);
+          const currentNorm = normalizePath(currentPagePath);
+          
+          const isActive = itemNorm === currentNorm && itemNorm !== '#';
+          const isParentOfActive = !isActive && isChildActive(item, currentPagePath);
+          
+          // Auto-expand if it's a parent of the active page
+          const isOpen = isParentOfActive || (isActive && isCollapsible); 
+
+          const liClasses = [];
+          if (isActive) liClasses.push('active');
+          if (isParentOfActive) liClasses.push('active-parent');
+          if (isCollapsible) liClasses.push('collapsible');
+          if (isOpen) liClasses.push('expanded');
+          
+          // Construct HREF (Same as before)
+          let href = item.path || '#';
+          if (!isExternal && href !== '#' && !href.startsWith('http')) {
+             let cleanPath = href.replace(/^(\.\/|\/)+/, '');
+             href = relativePathToRoot + cleanPath;
+             if (isOfflineMode) {
+                 if (href.endsWith('/')) href += 'index.html';
+                 else if (!href.endsWith('.html')) href += '/index.html';
+             } else {
+                 if (href.endsWith('/index.html')) href = href.slice(0, -10);
+             }
+          }
+    %>
+    <li class="<%= liClasses.join(' ') %>" <% if(isCollapsible) { %> aria-expanded="<%= isOpen %>" <% } %>>
+      <a href="<%= href %>" class="<%= isActive ? 'active' : '' %>" <%= isExternal ? 'target="_blank" rel="noopener"' : '' %>>
+        <% if (item.icon) { %> <%- renderIcon(item.icon) %> <% } %>
+        <span class="nav-item-title"><%= item.title %></span>
+        
+        <% if (isCollapsible) { %> 
+            <span class="collapse-icon-wrapper">
+                <%- renderIcon('chevron-right', { class: 'collapse-icon' }) %> 
+            </span>
+        <% } %>
+        
+        <% if (isExternal) { %> <%- renderIcon('external-link', { class: 'nav-external-icon' }) %> <% } %>
+      </a>
+      
+      <% if (item.children) { %>
+        <ul class="submenu">
+          <% renderNav(item.children); %>
+        </ul>
+      <% } %>
+    </li>
+    <% }); } renderNav(navItems); %>
+  </ul>
+</nav>