feat: dynamic navbar loaded from /api/navigation across all pages

blog.html

@@ -24,11 +24,7 @@
                 <span></span><span></span><span></span>
             </button>
             <ul class="nav-menu" id="navMenu">
-                <li class="nav-item"><a href="/" class="nav-link">HOME</a></li>
+                <!-- Loaded dynamically from /api/navigation -->
-                <li class="nav-item"><a href="/blog" class="nav-link active">BLOG</a></li>
-                <li class="nav-item"><a href="/#development" class="nav-link">DEVELOPMENT</a></li>
-                <li class="nav-item"><a href="/#links" class="nav-link">LINKS</a></li>
-                <li class="nav-item"><a href="/#contact" class="nav-link">CONTACT</a></li>
             </ul>
             <div class="nav-status">
                 <span class="nav-clock" id="navClock"></span>
@@ -80,5 +76,6 @@
     </footer>
 
     <script src="/js/blog.js"></script>
+    <script src="/js/nav.js"></script>
 </body>
 </html>

index.html

@@ -32,48 +32,7 @@
                 <span></span><span></span><span></span>
             </button>
             <ul class="nav-menu" id="navMenu">
-                <li class="nav-item">
+                <!-- Loaded dynamically from /api/navigation -->
-                    <a href="#home" class="nav-link active">HOME</a>
-                    <ul class="dropdown">
-                        <li><a href="#home">Dashboard</a></li>
-                        <li><a href="#about">About Me</a></li>
-                        <li><a href="#status">System Status</a></li>
-                    </ul>
-                </li>
-                <li class="nav-item">
-                    <a href="#blog" class="nav-link">BLOG</a>
-                    <ul class="dropdown">
-                        <li><a href="#blog">Latest Posts</a></li>
-                        <li><a href="#blog">Tutorials</a></li>
-                        <li><a href="#blog">Write-ups</a></li>
-                        <li><a href="#blog">Archive</a></li>
-                    </ul>
-                </li>
-                <li class="nav-item">
-                    <a href="#development" class="nav-link">DEVELOPMENT</a>
-                    <ul class="dropdown">
-                        <li><a href="#development">Projects</a></li>
-                        <li><a href="#development">Repositories</a></li>
-                        <li><a href="#development">Tech Stack</a></li>
-                        <li><a href="#development">Contributions</a></li>
-                    </ul>
-                </li>
-                <li class="nav-item">
-                    <a href="#links" class="nav-link">LINKS</a>
-                    <ul class="dropdown">
-                        <li><a href="https://git.jaeswift.xyz/jae" target="_blank">Gitea</a></li>
-                        <li><a href="https://gitlab.com/jaeswift" target="_blank">GitLab</a></li>
-                        <li><a href="https://reddit.com/u/jaeswift" target="_blank">Reddit</a></li>
-                        <li><a href="#links">All Links</a></li>
-                    </ul>
-                </li>
-                <li class="nav-item">
-                    <a href="#contact" class="nav-link">CONTACT</a>
-                    <ul class="dropdown">
-                        <li><a href="#contact">Send Message</a></li>
-                        <li><a href="mailto:jae@jaeswift.xyz">Email</a></li>
-                    </ul>
-                </li>
             </ul>
             <div class="nav-status">
                 <span class="nav-time" id="navTime">00:00:00</span>
@@ -600,5 +559,6 @@
     </footer>
 
     <script src="/js/main.js"></script>
+    <script src="/js/nav.js"></script>
 </body>
 </html>

js/nav.js

@@ -0,0 +1,75 @@
+/* ─── Dynamic Navigation ─── */
+/* Fetches nav items from /api/navigation and renders them */
+(function() {
+    'use strict';
+
+    async function loadNavigation() {
+        const navMenu = document.getElementById('navMenu');
+        if (!navMenu) return;
+
+        try {
+            const res = await fetch('/api/navigation');
+            if (!res.ok) throw new Error('Nav API ' + res.status);
+            const items = await res.json();
+
+            // Sort by order
+            items.sort((a, b) => (a.order || 0) - (b.order || 0));
+
+            // Determine current page for active state
+            const path = window.location.pathname;
+
+            // Build nav HTML
+            let html = '';
+            items.forEach(item => {
+                const url = item.url || '/';
+                const label = (item.label || '').toUpperCase();
+
+                // Determine if this link is active
+                let isActive = false;
+                if (url === '/' && (path === '/' || path === '/index.html')) {
+                    isActive = true;
+                } else if (url !== '/' && path.startsWith(url)) {
+                    isActive = true;
+                }
+
+                const activeClass = isActive ? ' active' : '';
+
+                // Check if it's an anchor link (homepage sections)
+                const isAnchor = url.startsWith('#') || url.startsWith('/#');
+                const href = isAnchor && path !== '/' ? '/' + url.replace(/^\//, '') : url;
+
+                html += `<li class="nav-item">`;
+                html += `<a href="${href}" class="nav-link${activeClass}">${label}</a>`;
+                html += `</li>\n`;
+            });
+
+            navMenu.innerHTML = html;
+        } catch (err) {
+            console.warn('Nav load failed, keeping existing:', err);
+            // Don't clear - keep any hardcoded fallback
+        }
+    }
+
+    // Nav toggle (hamburger menu)
+    function initNavToggle() {
+        const toggle = document.getElementById('navToggle');
+        const menu = document.getElementById('navMenu');
+        if (toggle && menu) {
+            toggle.addEventListener('click', () => {
+                menu.classList.toggle('open');
+                toggle.classList.toggle('active');
+            });
+        }
+    }
+
+    // Run on DOM ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => {
+            loadNavigation();
+            initNavToggle();
+        });
+    } else {
+        loadNavigation();
+        initNavToggle();
+    }
+})();

post.html

@@ -25,11 +25,7 @@
                 <span></span><span></span><span></span>
             </button>
             <ul class="nav-menu" id="navMenu">
-                <li class="nav-item"><a href="/" class="nav-link">HOME</a></li>
+                <!-- Loaded dynamically from /api/navigation -->
-                <li class="nav-item"><a href="/blog" class="nav-link active">BLOG</a></li>
-                <li class="nav-item"><a href="/#development" class="nav-link">DEVELOPMENT</a></li>
-                <li class="nav-item"><a href="/#links" class="nav-link">LINKS</a></li>
-                <li class="nav-item"><a href="/#contact" class="nav-link">CONTACT</a></li>
             </ul>
             <div class="nav-status">
                 <span class="nav-clock" id="navClock"></span>
@@ -114,5 +110,6 @@
     </footer>
 
     <script src="/js/post.js"></script>
+    <script src="/js/nav.js"></script>
 </body>
 </html>