feat: add sidebar panel system with icon strip and panel toggle

2026-08-02 18:10:18 +05:30 · 2026-03-04 15:45:34 +05:30
parent ed48f254f1
commit affe1a7e33
4 changed files with 247 additions and 2 deletions
@@ -0,0 +1,50 @@
+class SidebarManager {
+    constructor() {
+        this.sidebar = document.getElementById('sidebar');
+        this.panelContent = document.getElementById('sidebar-panel-content');
+        this.panelTitle = document.querySelector('.sidebar-panel-title');
+        this.activePanel = null;
+        this.panels = new Map();
+        this.setupEventListeners();
+    }
+
+    setupEventListeners() {
+        document.querySelectorAll('.sidebar-icon').forEach(btn => {
+            btn.addEventListener('click', () => this.togglePanel(btn.dataset.panel));
+        });
+        document.querySelector('.sidebar-panel-close')?.addEventListener('click', () => this.collapse());
+    }
+
+    registerPanel(name, { title, render }) {
+        this.panels.set(name, { title, render });
+    }
+
+    togglePanel(name) {
+        if (this.activePanel === name) {
+            this.collapse();
+        } else {
+            this.expand(name);
+        }
+    }
+
+    expand(name) {
+        const panel = this.panels.get(name);
+        if (!panel) return;
+        this.sidebar.classList.remove('collapsed');
+        this.panelTitle.textContent = panel.title;
+        this.panelContent.innerHTML = '';
+        panel.render(this.panelContent);
+        this.activePanel = name;
+        document.querySelectorAll('.sidebar-icon').forEach(btn => {
+            btn.classList.toggle('active', btn.dataset.panel === name);
+        });
+    }
+
+    collapse() {
+        this.sidebar.classList.add('collapsed');
+        this.activePanel = null;
+        document.querySelectorAll('.sidebar-icon').forEach(btn => btn.classList.remove('active'));
+    }
+}
+
+module.exports = { SidebarManager };