57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
|
class Layout {
|
||
|
|
static currentPage = 'chat';
|
||
|
|
|
||
|
|
static init() {
|
||
|
|
this.setCurrentPage();
|
||
|
|
this.loadNavbar();
|
||
|
|
this.setupNavigation();
|
||
|
|
}
|
||
|
|
|
||
|
|
static setCurrentPage() {
|
||
|
|
const hash = window.location.hash.substring(1) || 'chat';
|
||
|
|
this.currentPage = hash;
|
||
|
|
this.updateContent();
|
||
|
|
}
|
||
|
|
|
||
|
|
static async loadNavbar() {
|
||
|
|
try {
|
||
|
|
const response = await fetch('shared/navbar.html');
|
||
|
|
const html = await response.text();
|
||
|
|
|
||
|
|
if (!document.querySelector('.navbar')) {
|
||
|
|
document.body.insertAdjacentHTML('afterbegin', html);
|
||
|
|
}
|
||
|
|
|
||
|
|
document.querySelectorAll('.nav-link').forEach(link => {
|
||
|
|
link.classList.toggle('active', link.dataset.target === this.currentPage);
|
||
|
|
});
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to load navbar:', error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
static updateContent() {
|
||
|
|
// Add your content loading logic here
|
||
|
|
// For example: fetch(`pages/${this.currentPage}.html`)
|
||
|
|
// and update the main content area
|
||
|
|
}
|
||
|
|
|
||
|
|
static setupNavigation() {
|
||
|
|
document.addEventListener('click', (e) => {
|
||
|
|
const navLink = e.target.closest('.nav-link');
|
||
|
|
if (navLink) {
|
||
|
|
e.preventDefault();
|
||
|
|
const target = navLink.dataset.target;
|
||
|
|
window.location.hash = target;
|
||
|
|
this.currentPage = target;
|
||
|
|
this.loadNavbar();
|
||
|
|
this.updateContent();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Initialize on load and also on navigation
|
||
|
|
Layout.init();
|
||
|
|
window.addEventListener('popstate', () => Layout.init());
|