From ac9f18e4b9e6a3d07c6c47cbdd846dfbee084ba9 Mon Sep 17 00:00:00 2001 From: jae Date: Wed, 1 Apr 2026 01:30:31 +0000 Subject: [PATCH] feat: dynamic navbar loaded from /api/navigation across all pages --- blog.html | 7 ++--- index.html | 44 ++------------------------------ js/nav.js | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ post.html | 7 ++--- 4 files changed, 81 insertions(+), 52 deletions(-) create mode 100644 js/nav.js diff --git a/blog.html b/blog.html index 4791ea1..67bd8ec 100644 --- a/blog.html +++ b/blog.html @@ -24,11 +24,7 @@
@@ -80,5 +76,6 @@ + diff --git a/index.html b/index.html index 86c0ddc..e83e47b 100644 --- a/index.html +++ b/index.html @@ -32,48 +32,7 @@
00:00:00 @@ -600,5 +559,6 @@ + diff --git a/js/nav.js b/js/nav.js new file mode 100644 index 0000000..729792f --- /dev/null +++ b/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 += `
  • `; + html += `${label}`; + html += `
    • \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(); + } +})(); diff --git a/post.html b/post.html index a33b0f8..a94e3ca 100644 --- a/post.html +++ b/post.html @@ -25,11 +25,7 @@
    @@ -114,5 +110,6 @@ +