[deploy]

public/ts/ui/navigation.ts

@@ -0,0 +1,67 @@
+import { getState, setState } from '../state/store.js';
+
+export interface NavItem {
+  id: string;
+  label: string;
+  icon?: string;
+  requiresAdmin?: boolean;
+}
+
+const defaultNav: NavItem[] = [
+  { 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: HTMLElement, isAdmin: boolean) {
+  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: (section: string) => void) {
+  const navLinks = Array.from(document.querySelectorAll<HTMLAnchorElement>('.nav a'));
+  const activate = (section: string) => {
+    navLinks.forEach((link) => link.classList.toggle('active', link.dataset.target === section));
+    document.querySelectorAll<HTMLElement>('.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);
+  });
+}