jae/jaeswift-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
jae 2026-04-01 01:30:31 +00:00
parent ad2a47df19
commit ac9f18e4b9
4 changed files with 81 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
blog.html
View file

@ -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>
<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>
<!-- Loaded dynamically from /api/navigation -->
</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>

44
index.html
View file

@ -32,48 +32,7 @@
<span></span><span></span><span></span>
</button>
<ul class="nav-menu" id="navMenu">
<li class="nav-item">
<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>
<!-- Loaded dynamically from /api/navigation -->
</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>

75
js/nav.js Normal file
View file

@ -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();
}
})();

7
post.html
View file

@ -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>
<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>
<!-- Loaded dynamically from /api/navigation -->
</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>