Kontakt-Modul

frontend/js/knowledge.js

@@ -167,6 +167,9 @@ class KnowledgeManager {
 
     // Drag & Drop for entries
     this.bindEntryDragEvents();
+
+    // Sidebar resize functionality
+    this.bindResizeEvents();
   }
 
   // ==========================================
@@ -1143,6 +1146,79 @@ class KnowledgeManager {
     store.closeModal(modalId);
   }
 
+  // ==========================================
+  // SIDEBAR RESIZE
+  // ==========================================
+
+  bindResizeEvents() {
+    // Use native DOM methods instead of $ utility
+    this.resizeHandle = document.getElementById('knowledge-resize-handle');
+    this.knowledgeLayoutContainer = document.querySelector('.knowledge-layout');
+    
+    if (!this.resizeHandle || !this.knowledgeLayoutContainer) return;
+
+    // Load saved width from localStorage
+    const savedWidth = localStorage.getItem('knowledge-sidebar-width');
+    if (savedWidth) {
+      this.setSidebarWidth(parseInt(savedWidth));
+    }
+
+    let isResizing = false;
+    let startX = 0;
+    let startWidth = 0;
+
+    this.resizeHandle.addEventListener('mousedown', (e) => {
+      isResizing = true;
+      startX = e.clientX;
+      startWidth = this.getCurrentSidebarWidth();
+      
+      this.resizeHandle.classList.add('dragging');
+      this.knowledgeLayoutContainer.classList.add('resizing');
+      
+      document.addEventListener('mousemove', this.handleResize);
+      document.addEventListener('mouseup', this.handleResizeEnd);
+      
+      e.preventDefault();
+    });
+
+    this.handleResize = (e) => {
+      if (!isResizing) return;
+      
+      const deltaX = e.clientX - startX;
+      const newWidth = Math.max(220, Math.min(800, startWidth + deltaX));
+      
+      this.setSidebarWidth(newWidth);
+    };
+
+    this.handleResizeEnd = () => {
+      if (!isResizing) return;
+      
+      isResizing = false;
+      this.resizeHandle.classList.remove('dragging');
+      this.knowledgeLayoutContainer.classList.remove('resizing');
+      
+      document.removeEventListener('mousemove', this.handleResize);
+      document.removeEventListener('mouseup', this.handleResizeEnd);
+      
+      // Save current width to localStorage
+      const currentWidth = this.getCurrentSidebarWidth();
+      localStorage.setItem('knowledge-sidebar-width', currentWidth.toString());
+    };
+  }
+
+  getCurrentSidebarWidth() {
+    const computedStyle = getComputedStyle(this.knowledgeLayoutContainer);
+    const gridColumns = computedStyle.gridTemplateColumns;
+    const match = gridColumns.match(/(\d+)px/);
+    return match ? parseInt(match[1]) : 450;
+  }
+
+  setSidebarWidth(width) {
+    if (this.knowledgeLayoutContainer) {
+      this.knowledgeLayoutContainer.style.gridTemplateColumns = `${width}px 1fr`;
+    }
+  }
+
   // ==========================================
   // UTILITIES
   // ==========================================