I can toogle the left drawer

src/myfasthtml/assets/myfasthtml.css

@@ -12,4 +12,160 @@
     height: 16px;
     margin-top: auto;
     margin-bottom: 4px;
+}
+
+/*
+ * MF Layout Component - CSS Grid Layout
+ * Provides fixed header/footer, collapsible drawers, and scrollable main content
+ * Compatible with DaisyUI 5
+ */
+
+/* Main layout container using CSS Grid */
+.mf-layout {
+    display: grid;
+    grid-template-areas:
+    "header header header"
+    "left-drawer main right-drawer"
+    "footer footer footer";
+    grid-template-rows: 32px 1fr 32px;
+    grid-template-columns: auto 1fr auto;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+}
+
+/* Header - fixed at top */
+.mf-layout-header {
+    grid-area: header;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0 1rem;
+    background-color: var(--color-base-300);
+    border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);
+    z-index: 30;
+}
+
+/* Footer - fixed at bottom */
+.mf-layout-footer {
+    grid-area: footer;
+    display: flex;
+    align-items: center;
+    padding: 0 1rem;
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+    border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);
+    z-index: 30;
+}
+
+/* Main content area - scrollable */
+.mf-layout-main {
+    grid-area: main;
+    overflow-y: auto;
+    overflow-x: auto;
+    padding: 1rem;
+    background-color: var(--color-base-100);
+}
+
+/* Drawer base styles */
+.mf-layout-drawer {
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: var(--color-base-100);
+    transition: width 0.3s ease-in-out, margin 0.3s ease-in-out;
+    width: 250px;
+    padding: 1rem;
+}
+
+/* Left drawer */
+.mf-layout-left-drawer {
+    grid-area: left-drawer;
+    border-right: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);
+}
+
+/* Right drawer */
+.mf-layout-right-drawer {
+    grid-area: right-drawer;
+    border-left: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);
+}
+
+/* Collapsed drawer states */
+.mf-layout-drawer.collapsed {
+    width: 0;
+    padding: 0;
+    border: none;
+    overflow: hidden;
+}
+
+/* Toggle buttons positioning */
+.mf-layout-toggle-left {
+    margin-right: auto;
+}
+
+.mf-layout-toggle-right {
+    margin-left: auto;
+}
+
+/* Smooth scrollbar styling for webkit browsers */
+.mf-layout-main::-webkit-scrollbar,
+.mf-layout-drawer::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.mf-layout-main::-webkit-scrollbar-track,
+.mf-layout-drawer::-webkit-scrollbar-track {
+    background: var(--color-base-200);
+}
+
+.mf-layout-main::-webkit-scrollbar-thumb,
+.mf-layout-drawer::-webkit-scrollbar-thumb {
+    background: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+    border-radius: 4px;
+}
+
+.mf-layout-main::-webkit-scrollbar-thumb:hover,
+.mf-layout-drawer::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in oklab, var(--color-base-content) 30%, #0000);
+}
+
+/* Responsive adjustments for smaller screens */
+@media (max-width: 768px) {
+    .mf-layout-drawer {
+        width: 200px;
+    }
+
+    .mf-layout-header,
+    .mf-layout-footer {
+        padding: 0 0.5rem;
+    }
+
+    .mf-layout-main {
+        padding: 0.5rem;
+    }
+}
+
+/* Handle layouts with no drawers */
+.mf-layout[data-left-drawer="false"] {
+    grid-template-areas:
+    "header header"
+    "main right-drawer"
+    "footer footer";
+    grid-template-columns: 1fr auto;
+}
+
+.mf-layout[data-right-drawer="false"] {
+    grid-template-areas:
+    "header header"
+    "left-drawer main"
+    "footer footer";
+    grid-template-columns: auto 1fr;
+}
+
+.mf-layout[data-left-drawer="false"][data-right-drawer="false"] {
+    grid-template-areas:
+    "header"
+    "main"
+    "footer";
+    grid-template-columns: 1fr;
 }

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};
+}