@docmd/ui 0.4.8 → 0.4.10

package/assets/css/docmd-main.css

@@ -203,9 +203,10 @@ a:any-link {
     margin: 0
 }
 
-.sidebar nav li a, .sidebar nav li .nav-label {
+.sidebar nav li a,
+.sidebar nav li .nav-label {
     display: block;
-    padding: .5em;
+    padding: .4em .5em;
     margin: .15em 0;
     text-decoration: none;
     color: var(--sidebar-text);
@@ -214,6 +215,10 @@ a:any-link {
     font-size: .9em;
 }
 
+.sidebar nav li a {
+    cursor: pointer;
+}
+
 .sidebar nav li>a.active {
     color: var(--link-color);
     font-weight: 600;
@@ -237,11 +242,18 @@ a:any-link {
     opacity: 1;
 }
 
+.sidebar nav li .nav-label {
+    cursor: default;
+    padding: 0.25em .5em;
+    color: var(--text-color);
+    font-weight: 600;
+}
+
 .sidebar nav .submenu {
     display: none;
     padding-left: .25em;
     border-left: 1px solid var(--link-color);
-    margin-left: .75em;
+    margin-left: .85em;
 }
 
 .sidebar nav li[aria-expanded="true"]>.submenu,
@@ -1604,7 +1616,7 @@ hr {
 
 .footer-complete-top {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     flex-wrap: wrap;
     gap: 2rem;
     max-width: 1200px;
@@ -1625,7 +1637,7 @@ hr {
     width: fit-content;
 }
 
-.footer-brand .logo-link img{
+.footer-brand .logo-link img {
     max-height: 30px;
     width: auto;
 }
@@ -1725,7 +1737,8 @@ hr {
     color: #fb3a3a
 }
 
-.branding-footer a, .page-footer a {
+.branding-footer a,
+.page-footer a {
     color: var(--link-color);
     text-decoration: none
 }

package/assets/js/docmd-main.js

@@ -11,6 +11,11 @@
  * [docmd-source] - Please do not remove this header.
  * --------------------------------------------------------------------
  */
+/**
+ * --------------------------------------------------------------------
+ * docmd : Client-Side Application Logic (SPA Router & UI)
+ * --------------------------------------------------------------------
+ */
 
 (function() {
   // =========================================================================
@@ -138,7 +143,7 @@
     });
   }
 
-// =========================================================================
+  // =========================================================================
   // 3. TARGETED SPA ROUTER
   // =========================================================================
   function initializeSPA() {
@@ -148,7 +153,7 @@
     let currentPath = window.location.pathname;
 
     document.addEventListener('click', async (e) => {
-
+      // Ignore clicks on expand/collapse arrows so they don't trigger navigation
       if (e.target.closest('.collapse-icon-wrapper')) return;
 
       const link = e.target.closest('.sidebar-nav a, .page-navigation a');
@@ -162,19 +167,17 @@
       await navigateTo(url.href);
     });
 
-    // Handle Back/Forward browser buttons & TOC Hash clicks
     window.addEventListener('popstate', () => {
-      // If the path is identical, it means ONLY the #hash changed. Do not reload!
-      if (window.location.pathname === currentPath) return;
-      
+      if (window.location.pathname === currentPath) return; // Ignore hash-only changes
       navigateTo(window.location.href, false);
     });
 
     async function navigateTo(url, pushHistory = true) {
-      const mainContentWrapper = document.querySelector('.main-content-wrapper');
+      const layout = document.querySelector('.content-layout');
       
       try {
-        if (mainContentWrapper) mainContentWrapper.style.opacity = '0.5';
+        // Lock height to prevent scrollbar jitter/dragging during DOM swap
+        if (layout) layout.style.minHeight = layout.getBoundingClientRect().height + 'px';
         
         const res = await fetch(url);
         if (!res.ok) throw new Error('Fetch failed');
@@ -183,19 +186,17 @@
         const parser = new DOMParser();
         const doc = parser.parseFromString(html, 'text/html');
 
-        // 1. UPDATE URL FIRST
         if (pushHistory) history.pushState({}, '', finalUrl);
         currentPath = new URL(finalUrl).pathname;
         document.title = doc.title;
 
-        // 2. SAFELY SYNC HEAD ASSETS (Favicon & CSS)
+        // Sync Assets
         const assetSelectors = 'link[rel="stylesheet"], link[rel="icon"], link[rel="shortcut icon"]';
         const oldAssets = Array.from(document.head.querySelectorAll(assetSelectors));
         const newAssets = Array.from(doc.head.querySelectorAll(assetSelectors));
 
         newAssets.forEach((newAsset, index) => {
             if (oldAssets[index]) {
-                // Only update if the relative path actually changed
                 if (oldAssets[index].getAttribute('href') !== newAsset.getAttribute('href')) {
                     oldAssets[index].setAttribute('href', newAsset.getAttribute('href'));
                 }
@@ -204,16 +205,39 @@
             }
         });
 
-        // 3. MEMORIZE SIDEBAR STATE
-        const openMenus = new Set();
-        document.querySelectorAll('.sidebar-nav li.collapsible.expanded > .nav-label .nav-item-title, .sidebar-nav li.collapsible.expanded > a .nav-item-title').forEach(el => {
-            openMenus.add(el.textContent.trim());
-        });
+        // Memorize Sidebar
+        const oldLis = Array.from(document.querySelectorAll('.sidebar-nav li'));
+        const newLis = Array.from(doc.querySelectorAll('.sidebar-nav li'));
         
-        // 4. SWAP BODY COMPONENTS
+        oldLis.forEach((oldLi, i) => {
+            const newLi = newLis[i];
+            if (newLi) {
+                // Sync active classes
+                oldLi.classList.toggle('active', newLi.classList.contains('active'));
+                oldLi.classList.toggle('active-parent', newLi.classList.contains('active-parent'));
+
+                // Add expanded class if the new page requires it, but NEVER remove it
+                if (newLi.classList.contains('expanded')) {
+                    oldLi.classList.add('expanded');
+                    oldLi.setAttribute('aria-expanded', 'true');
+                }
+
+                // Sync relative hrefs
+                const oldA = oldLi.querySelector('a');
+                const newA = newLi.querySelector('a');
+                if (oldA && newA) {
+                    oldA.setAttribute('href', newA.getAttribute('href'));
+                    oldA.classList.toggle('active', newA.classList.contains('active'));
+                }
+            }
+        });
+
+        // 3. Swap Body Components (Removed .sidebar-nav from this list)
         const selectorsToSwap =[
-          '.main-content', '.toc-sidebar', '.sidebar-nav', 
-          '.page-header .header-title', '.page-footer', '.footer-complete',
+          '.content-layout', 
+          '.page-header .header-title', 
+          '.page-footer', 
+          '.footer-complete',
           '.page-footer-actions'
         ];
 
@@ -223,33 +247,27 @@
             if (oldEl && newEl) oldEl.innerHTML = newEl.innerHTML;
         });
 
-        // 5. RESTORE SIDEBAR STATE
-        document.querySelectorAll('.sidebar-nav li.collapsible').forEach(li => {
-            const title = li.querySelector('.nav-item-title')?.textContent.trim();
-            if (openMenus.has(title)) {
-                li.classList.add('expanded');
-                li.setAttribute('aria-expanded', 'true');
-            }
-        });
-
-        // 6. SCROLL & RE-INIT
+        // Scroll & Init
         const hash = new URL(finalUrl).hash;
         if (hash) {
             document.querySelector(hash)?.scrollIntoView();
         } else {
-            if (mainContentWrapper) mainContentWrapper.scrollTo(0, 0);
             window.scrollTo(0, 0);
         }
 
-        if (mainContentWrapper) mainContentWrapper.style.opacity = '1';
         injectCopyButtons();
         initializeScrollSpy();
-        
         const newMainContent = document.querySelector('.main-content');
         if (newMainContent) executeScripts(newMainContent);
 
         document.dispatchEvent(new CustomEvent('docmd:page-mounted', { detail: { url: finalUrl } }));
 
+        // Unlock height smoothly
+        setTimeout(() => {
+            const newLayout = document.querySelector('.content-layout');
+            if (newLayout) newLayout.style.minHeight = '';
+        }, 100);
+
       } catch(e) {
         window.location.assign(url);
       }
@@ -271,7 +289,6 @@
         document.body.setAttribute('data-theme', t);
         localStorage.setItem('docmd-theme', t);
         
-        // Highlight.js CSS swap
         const lightLink = document.getElementById('hljs-light');
         const darkLink = document.getElementById('hljs-dark');
         if (lightLink && darkLink) {
@@ -285,19 +302,14 @@
     initializeScrollSpy();
     initializeSPA();
     
-    // Auto-scroll sidebar safely
     setTimeout(() => {
         const activeNav = document.querySelector('.sidebar-nav a.active');
         const sidebarNav = document.querySelector('.sidebar-nav');
         if (activeNav && sidebarNav) {
-            // Calculate scroll top safely instead of scrollIntoView which causes page jump
             sidebarNav.scrollTo({ top: activeNav.offsetTop - (sidebarNav.clientHeight / 2), behavior: 'instant' });
         }
-        
-        // Ensure Hash anchors work on direct link visits (New Tab)
         if (window.location.hash) {
-            const el = document.querySelector(window.location.hash);
-            if (el) el.scrollIntoView();
+            document.querySelector(window.location.hash)?.scrollIntoView();
         }
     }, 100);
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docmd/ui",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "description": "Base UI templates and assets for docmd",
   "main": "index.js",
   "files": [

package/templates/navigation.ejs

@@ -84,7 +84,7 @@
     %>
     <li class="<%= liClasses.join(' ') %>" <% if(isInteractive) { %> aria-expanded="<%= isOpen %>" <% } %>>
       <% if (isDummyLink) { %>
-        <span class="nav-label" style="cursor: <%= isInteractive ? 'pointer' : 'default' %>;">
+        <span class="nav-label">
           <% if (item.icon) { %> <%- renderIcon(item.icon) %> <% } %>
           <span class="nav-item-title"><%= item.title %></span>
           <% if (isInteractive) { %>