I can toogle the left drawer

src/myfasthtml/assets/myfasthtml.js

@@ -0,0 +1,119 @@
+/**
+ * MF Layout Component - JavaScript Controller
+ * Manages drawer state and provides programmatic control
+ */
+
+// Global registry for layout instances
+if (typeof window.mfLayoutInstances === 'undefined') {
+  window.mfLayoutInstances = {};
+}
+
+/**
+ * Initialize a layout instance with drawer controls
+ * @param {string} layoutId - The unique ID of the layout (mf-layout-xxx)
+ */
+function initLayout(layoutId) {
+  const layoutElement = document.getElementById(layoutId);
+
+  if (!layoutElement) {
+    console.error(`Layout with id "${layoutId}" not found`);
+    return;
+  }
+
+  // Create layout controller object
+  const layoutController = {
+    layoutId: layoutId,
+    element: layoutElement,
+
+    /**
+     * Get drawer element by side
+     * @param {string} side - 'left' or 'right'
+     * @returns {HTMLElement|null} The drawer element
+     */
+    getDrawer: function (side) {
+      if (side !== 'left' && side !== 'right') {
+        console.error(`Invalid drawer side: "${side}". Must be "left" or "right".`);
+        return null;
+      }
+
+      const drawerClass = side === 'left' ? '.mf-layout-left-drawer' : '.mf-layout-right-drawer';
+      return this.element.querySelector(drawerClass);
+    },
+
+    /**
+     * Check if a drawer is currently open
+     * @param {string} side - 'left' or 'right'
+     * @returns {boolean} True if drawer is open
+     */
+    isDrawerOpen: function (side) {
+      const drawer = this.getDrawer(side);
+      return drawer ? !drawer.classList.contains('collapsed') : false;
+    },
+
+    /**
+     * Open a drawer
+     * @param {string} side - 'left' or 'right'
+     */
+    openDrawer: function (side) {
+      const drawer = this.getDrawer(side);
+      if (drawer) {
+        drawer.classList.remove('collapsed');
+      }
+    },
+
+    /**
+     * Close a drawer
+     * @param {string} side - 'left' or 'right'
+     */
+    closeDrawer: function (side) {
+      const drawer = this.getDrawer(side);
+      if (drawer) {
+        drawer.classList.add('collapsed');
+      }
+    },
+
+    /**
+     * Toggle a drawer between open and closed
+     * @param {string} side - 'left' or 'right'
+     */
+    toggleDrawer: function (side) {
+      if (this.isDrawerOpen(side)) {
+        this.closeDrawer(side);
+      } else {
+        this.openDrawer(side);
+      }
+    },
+
+    /**
+     * Initialize event listeners for toggle buttons
+     */
+    initEventListeners: function () {
+      // Get all toggle buttons within this layout
+      const toggleButtons = this.element.querySelectorAll('[class*="mf-layout-toggle"]');
+
+      toggleButtons.forEach(button => {
+        button.addEventListener('click', (event) => {
+          event.preventDefault();
+          const side = button.getAttribute('data-side');
+          if (side) {
+            this.toggleDrawer(side);
+          }
+        });
+      });
+    }
+  };
+
+  // Initialize event listeners
+  layoutController.initEventListeners();
+
+  // Store instance in global registry for programmatic access
+  window.mfLayoutInstances[layoutId] = layoutController;
+
+  // Log successful initialization
+  console.log(`Layout "${layoutId}" initialized successfully`);
+}
+
+// Export for module environments if needed
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {initLayout};
+}