// Side navigation component.
// Reads items from navigation.json (path relative to web root via data-base attribute,
// defaults to ./navigation.json).
// Highlights the active entry by matching href against window.location.pathname.
const ICONS = {
dashboard: ``,
vpc: ``,
subnet: ``,
vm: ``,
}
function resolveIcon(name) {
return ICONS[name] ?? ``
}
class SideNav extends HTMLElement {
async connectedCallback() {
this.attachShadow({ mode: 'open' })
const navPath = this.dataset.src ?? './navigation.json'
const response = await fetch(navPath)
if (!response.ok) throw new Error(`side-nav: failed to load ${navPath}`)
const items = await response.json()
this.#render(items)
}
#render(items) {
const currentPage = window.location.pathname.split('/').pop() || 'index.html'
const links = items.map(item => {
const isActive = item.href === currentPage
return `
${resolveIcon(item.icon)}
${item.label}
`
}).join('')
this.shadowRoot.innerHTML = `
${links}
`
}
}
customElements.define('side-nav', SideNav)