Fix sidebar links on all pages, update nav.js as single source of truth

Author: pepc84

about/index.html

@@ -49,11 +49,11 @@
 </nav>
 <div class="layout">
   <div class="sidebar-outer">
-    <div id="site-sidebar">
-      <a href="../libraries">Libraries</a>
-      <a href="../reference">Reference</a>
-      <a href="../examples">Examples</a>
-      <a href="../about" class="active">About</a>
+        <div id="site-sidebar">
+      <a href="../libraries" >Libraries</a>
+      <a href="../reference" >Reference</a>
+      <a href="../examples" >Examples</a>
+      <a href="../about" class='active'>About</a>
     </div>
   </div>
   <div class="content">

assets/nav.js

@@ -1,13 +1,9 @@
 (function() {
   const path = window.location.pathname;
-
-  // Figure out prefix based on depth
+  const isRoot = path === '/' || path === '/index.html';
   const parts = path.replace(/\/$/, '').split('/').filter(Boolean);
-  const isRoot = parts.length === 0;
-  const isExamplePage = parts.length === 2 && parts[0] === 'examples';
-  const prefix = (isRoot) ? '/' : '../';
+  const prefix = (isRoot || parts.length === 0) ? '/' : '../';
 
-  // Active link detection
   function isActive(name) {
     return path.includes('/' + name);
   }
@@ -17,23 +13,19 @@
     return `<a href="${prefix}${name}"${active}>${label}</a>`;
   }
 
-  // Inject nav
   const nav = document.getElementById('site-nav');
   if (nav) {
-    const logoTag = isRoot
-      ? `<div class="nav-logo">`
-      : `<a href="${prefix}" class="nav-logo">`;
+    const logoTag = isRoot ? `<div class="nav-logo">` : `<a href="${prefix}" class="nav-logo">`;
     const logoClose = isRoot ? `</div>` : `</a>`;
     nav.innerHTML = `
       ${logoTag}
         <img src="${prefix}assets/cpp-logo.png" alt="C++ Mode">
         <span>C++ Mode</span>
       ${logoClose}
-      <button class="hamburger" onclick="document.querySelector('.sidebar-outer').classList.toggle('open')">☰</button>
+      <button class="hamburger" onclick="document.querySelector('.sidebar-outer') && document.querySelector('.sidebar-outer').classList.toggle('open')">☰</button>
     `;
   }
 
-  // Inject sidebar top links
   const sidebar = document.getElementById('site-sidebar');
   if (sidebar) {
     sidebar.innerHTML = `

libraries/index.html

@@ -49,11 +49,11 @@
 </nav>
 <div class="layout">
   <div class="sidebar-outer">
-    <div id="site-sidebar">
-      <a href="../libraries" class="active">Libraries</a>
-      <a href="../reference">Reference</a>
-      <a href="../examples">Examples</a>
-      <a href="../about">About</a>
+        <div id="site-sidebar">
+      <a href="../libraries" class='active'>Libraries</a>
+      <a href="../reference" >Reference</a>
+      <a href="../examples" >Examples</a>
+      <a href="../about" >About</a>
     </div>
   </div>
   <div class="content">

reference/index.html

@@ -49,11 +49,11 @@
 </nav>
 <div class="layout">
   <div class="sidebar-outer">
-    <div id="site-sidebar">
-      <a href="../libraries">Libraries</a>
-      <a href="../reference" class="active">Reference</a>
-      <a href="../examples">Examples</a>
-      <a href="../about">About</a>
+        <div id="site-sidebar">
+      <a href="../libraries" >Libraries</a>
+      <a href="../reference" class='active'>Reference</a>
+      <a href="../examples" >Examples</a>
+      <a href="../about" >About</a>
     </div>
   </div>
   <div class="content">