54 lines
2.1 KiB
JavaScript
54 lines
2.1 KiB
JavaScript
import { setState } from '../state/store.js';
|
|
const defaultNav = [
|
|
{ id: 'overview', label: 'Uebersicht', icon: '[*]' },
|
|
{ id: 'tickets', label: 'Ticketsystem', icon: '[*]' },
|
|
{ id: 'modules', label: 'Module', icon: '[*]' },
|
|
{ id: 'settings', label: 'Einstellungen', icon: '[*]' },
|
|
{ id: 'events', label: 'Events', icon: '[*]' },
|
|
{ id: 'admin', label: 'Admin', icon: '[*]', requiresAdmin: true }
|
|
];
|
|
export function renderSidebar(container, isAdmin) {
|
|
container.innerHTML = '';
|
|
const brand = document.createElement('div');
|
|
brand.className = 'brand';
|
|
brand.textContent = 'Papo Control';
|
|
const nav = document.createElement('div');
|
|
nav.className = 'nav';
|
|
defaultNav.forEach((item) => {
|
|
if (item.requiresAdmin && !isAdmin)
|
|
return;
|
|
const a = document.createElement('a');
|
|
a.href = `#${item.id}`;
|
|
a.dataset.target = item.id;
|
|
a.innerHTML = `<span class="icon">${item.icon || ''}</span>${item.label}`;
|
|
nav.appendChild(a);
|
|
});
|
|
container.appendChild(brand);
|
|
container.appendChild(nav);
|
|
}
|
|
export function initNavigation(onChange) {
|
|
const navLinks = Array.from(document.querySelectorAll('.nav a'));
|
|
const activate = (section) => {
|
|
navLinks.forEach((link) => link.classList.toggle('active', link.dataset.target === section));
|
|
document.querySelectorAll('.section').forEach((sec) => {
|
|
sec.classList.toggle('active', sec.id === `section-${section}`);
|
|
});
|
|
setState({}); // trigger listeners for potential observers
|
|
onChange(section);
|
|
};
|
|
navLinks.forEach((link) => {
|
|
link.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const target = link.dataset.target || 'overview';
|
|
history.replaceState(null, '', `#${target}`);
|
|
activate(target);
|
|
});
|
|
});
|
|
const initial = (location.hash || '#overview').replace('#', '');
|
|
activate(initial);
|
|
window.addEventListener('hashchange', () => {
|
|
const section = (location.hash || '#overview').replace('#', '');
|
|
activate(section);
|
|
});
|
|
}
|