https://loar.ai/assets/controllers/sidebar_controller-b5d7d77cea57…884b5baf92c04d0fec7d56aebb6078b7a61a4a78.js

1import { Controller } from "@hotwired/stimulus"
2
3// Connects to data-controller="sidebar"
4export default class extends Controller {
5  static targets = ["sidebar", "textLabel", "collapseIcon", "expandIcon"]
6  static classes = ["collapsed", "expanded"]
7  static values = { collapsed: { type: Boolean, default: false } }
8
9  connect() {
10    console.log("Sidebar controller connected", this.element);
11    // Optionally load collapsed state from localStorage
12    this.collapsedValue = localStorage.getItem("sidebarCollapsed") === "true";
13    this.updateSidebarState();
14  }
15
16  toggle() {
17    console.log("Sidebar toggle action fired!");
18    this.collapsedValue = !this.collapsedValue;
19    // Optionally save state to localStorage
20    localStorage.setItem("sidebarCollapsed", this.collapsedValue);
21    this.updateSidebarState();
22  }
23
24  updateSidebarState() {
25    console.log("Updating sidebar state. Collapsed:", this.collapsedValue);
26    const collapseButtonLabel = this.textLabelTargets.find(label => label.textContent === "Collapse" || label.textContent === "Expand");
27
28    if (this.collapsedValue) {
29      this.sidebarTarget.classList.remove('w-64');
30      this.sidebarTarget.classList.add('w-16');
31      this.element.classList.add(this.collapsedClass);
32      this.element.classList.remove(this.expandedClass);
33      // Hide text labels (excluding the Collapse/Expand button label initially)
34      this.textLabelTargets.forEach(label => {
35        if (label !== collapseButtonLabel) {
36          label.classList.add('opacity-0', 'invisible');
37          label.classList.remove('opacity-100', 'visible');
38        }
39      });
40      // Update toggle button icon and text
41      this.collapseIconTarget.classList.add('hidden');
42      this.expandIconTarget.classList.remove('hidden');
43      if (collapseButtonLabel) collapseButtonLabel.textContent = "Expand";
44      // Optionally hide the button label too when collapsed
45      // if (collapseButtonLabel) collapseButtonLabel.classList.add('opacity-0', 'invisible');
46      
47    } else {
48      this.sidebarTarget.classList.remove('w-16');
49      this.sidebarTarget.classList.add('w-64');
50      this.element.classList.remove(this.collapsedClass);
51      this.element.classList.add(this.expandedClass);
52      // Show text labels
53      this.textLabelTargets.forEach(label => {
54        label.classList.remove('opacity-0', 'invisible');
55        label.classList.add('opacity-100', 'visible');
56      });
57      // Update toggle button icon and text
58      this.collapseIconTarget.classList.remove('hidden');
59      this.expandIconTarget.classList.add('hidden');
60      if (collapseButtonLabel) collapseButtonLabel.textContent = "Collapse";
61    }
62  }
63
64  // Optional: Add logic for drag-to-resize here if needed later
65} ;