feat: Implement sidebar collapse and expand functionality

- Add CSS for collapsed sidebar state and transitions - Introduce SidebarToggle class for managing collapse/expand logic - Integrate SidebarToggle initialization in main script - Add toggle button to navbar and make mini sidebar clickable - Store sidebar collapsed state in localStorage - Filter image files and directories in view mode via FileTree - Make navbar brand clickable to navigate to collection root or home
2025-10-26 18:48:31 +03:00
parent 7a9efd3542
commit afcd074913
7 changed files with 290 additions and 46 deletions
--- a/static/js/sidebar-toggle.js
+++ b/static/js/sidebar-toggle.js
@@ -0,0 +1,114 @@
+/**
+ * Sidebar Toggle Module
+ * Manages sidebar collapse/expand functionality with localStorage persistence
+ */
+
+class SidebarToggle {
+    constructor(sidebarId, toggleButtonId) {
+        this.sidebar = document.getElementById(sidebarId);
+        this.toggleButton = document.getElementById(toggleButtonId);
+        this.storageKey = Config.STORAGE_KEYS.SIDEBAR_COLLAPSED || 'sidebarCollapsed';
+        this.isCollapsed = localStorage.getItem(this.storageKey) === 'true';
+
+        this.init();
+    }
+
+    /**
+     * Initialize the sidebar toggle
+     */
+    init() {
+        // Apply initial state
+        this.apply();
+
+        // Setup toggle button click handler
+        if (this.toggleButton) {
+            this.toggleButton.addEventListener('click', () => {
+                this.toggle();
+            });
+        }
+
+        // Make mini sidebar clickable to expand
+        if (this.sidebar) {
+            this.sidebar.addEventListener('click', (e) => {
+                // Only expand if sidebar is collapsed and click is on the mini sidebar itself
+                // (not on the file tree content when expanded)
+                if (this.isCollapsed) {
+                    this.expand();
+                }
+            });
+
+            // Add cursor pointer when collapsed
+            this.sidebar.style.cursor = 'default';
+        }
+
+        Logger.debug(`Sidebar initialized: ${this.isCollapsed ? 'collapsed' : 'expanded'}`);
+    }
+
+    /**
+     * Toggle sidebar state
+     */
+    toggle() {
+        this.isCollapsed = !this.isCollapsed;
+        localStorage.setItem(this.storageKey, this.isCollapsed);
+        this.apply();
+
+        Logger.debug(`Sidebar ${this.isCollapsed ? 'collapsed' : 'expanded'}`);
+    }
+
+    /**
+     * Apply the current sidebar state
+     */
+    apply() {
+        if (this.sidebar) {
+            if (this.isCollapsed) {
+                this.sidebar.classList.add('collapsed');
+                this.sidebar.style.cursor = 'pointer'; // Make mini sidebar clickable
+            } else {
+                this.sidebar.classList.remove('collapsed');
+                this.sidebar.style.cursor = 'default'; // Normal cursor when expanded
+            }
+        }
+
+        // Update toggle button icon
+        if (this.toggleButton) {
+            const icon = this.toggleButton.querySelector('i');
+            if (icon) {
+                if (this.isCollapsed) {
+                    icon.className = 'bi bi-layout-sidebar-inset-reverse';
+                } else {
+                    icon.className = 'bi bi-layout-sidebar';
+                }
+            }
+        }
+    }
+
+    /**
+     * Collapse the sidebar
+     */
+    collapse() {
+        if (!this.isCollapsed) {
+            this.toggle();
+        }
+    }
+
+    /**
+     * Expand the sidebar
+     */
+    expand() {
+        if (this.isCollapsed) {
+            this.toggle();
+        }
+    }
+
+    /**
+     * Check if sidebar is currently collapsed
+     * @returns {boolean} True if sidebar is collapsed
+     */
+    isCollapsedState() {
+        return this.isCollapsed;
+    }
+}
+
+// Make SidebarToggle globally available
+window.SidebarToggle = SidebarToggle;
+