OPtimized components

docs/demo_layout.md

@@ -22,24 +22,40 @@ mount(
 <div id="demo-drawer"></div>
 
 ```js
-const drawerOpen = $(false);
+const leftOpen = $(false)
+const rightOpen = $(false)
 
 mount(
-  div({}, [
-    Drawer({ open: drawerOpen, id: 'drw', side: Menu({ items: [
-      { label: 'Dashboard', onclick: () => drawerOpen(false) },
-      { label: 'Settings' },
-      { label: 'Help' }
-    ]}) }, [
-      div({ class: 'p-4 border border-base-300' }, [
-        h3({ class: 'text-lg font-bold' }, 'Main Content'),
-        Button({ class: 'btn', onclick: () => drawerOpen(true) }, 'Open Drawer'),
-        p({}, 'This is the main page. Click the button above to open the drawer.')
+  Drawer({ open: leftOpen }, [
+    DrawerToggle({ id: 'left-drawer', checked: leftOpen }),
+    DrawerContent({}, [
+      Drawer({ open: rightOpen, class: 'drawer-end' }, [
+        DrawerToggle({ id: 'right-drawer', checked: rightOpen }),
+        DrawerContent({}, [
+          div({ class: 'p-4' }, [
+            h3({ class: 'text-lg font-bold' }, 'Panel central'),
+            label({ for: 'left-drawer', class: 'btn' }, 'Abrir izquierdo'),
+            label({ for: 'right-drawer', class: 'btn ml-2' }, 'Abrir derecho'),
+            p({}, 'Contenido principal aquí...')
+          ])
+        ]),
+        DrawerSide({}, [
+          DrawerOverlay({ for: 'right-drawer' }),
+          div({ class: 'min-h-full bg-base-200 w-60 p-4' },
+            h4({ class: 'font-semibold' }, 'Menú derecho')
+          )
+        ])
       ])
+    ]),
+    DrawerSide({}, [
+      DrawerOverlay({ for: 'left-drawer' }),
+      div({ class: 'min-h-full bg-base-200 w-60 p-4' },
+        h4({ class: 'font-semibold' }, 'Menú izquierdo')
+      )
     ])
   ]),
   '#demo-drawer'
-);
+)
 ```
 
 ## Dropdown
@@ -48,35 +64,30 @@ mount(
 ```js
 mount(
   div({ class: 'flex gap-4' }, [
-    // Example 1: con Menu (cierre automático al hacer clic en un ítem)
-    Dropdown({ label: 'Options', class: 'dropdown' }, [
-      Menu({
-        items: [
-          { label: 'Edit', onclick: () => close() },
-          { label: 'Delete', onclick: () => close() },
-          { label: 'Archive' }
-        ],
-        class: 'dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow z-1'
-      })
-    ]),
-    // Example 2: manual (cerrar ítems con blur)
-    Dropdown({ label: 'More', class: 'dropdown' }, [
-      ul({ class: 'dropdown-content menu bg-base-100 rounded-box w-40 p-2 shadow' }, [
-        li({}, a({ 
-          tabindex: '-1',
-          href: '#', 
-          onclick: (e) => { e.preventDefault();  close(); } 
-        }, 'Profile')),
-        li({}, a({ 
-          tabindex: '-1',
-          href: '#', 
-          onclick: (e) => { e.preventDefault();  close(); } 
-        }, 'Logout'))
+    Dropdown({}, [
+      DropdownButton({}, 'Options'),
+      DropdownContent({ class: 'menu bg-base-100 rounded-box w-52 p-2 shadow' }, [
+        Menu({
+          items: [
+            { label: 'Edit', onclick: () => close() },
+            { label: 'Delete', onclick: () => close() },
+            { label: 'Archive' }
+          ]
+        })
       ])
+    ]),
+    Dropdown({}, [
+      DropdownButton({}, 'More'),
+      DropdownContent({ class: 'menu bg-base-100 rounded-box w-40 p-2 shadow' }, 
+        ul({}, [
+          li({}, a({ href: '#', onclick: (e) => { e.preventDefault(); close(); } }, 'Profile')),
+          li({}, a({ href: '#', onclick: (e) => { e.preventDefault(); close(); } }, 'Logout'))
+        ])
+      )
     ])
   ]),
   '#demo-dropdown'
-)
+);
 ```
 
 ## Fab