mithril-materialized 3.4.4 → 3.5.0

package/dist/index.esm.js

@@ -264,6 +264,7 @@ const Autocomplete = () => {
             state.isOpen = false;
             state.selectedIndex = -1;
         }
+        m.redraw();
     };
     const getDropdownStyles = () => {
         if (!state.inputElement) {
@@ -962,6 +963,18 @@ const iconPaths = {
         'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z', // chevron down
         'M0 0h24v24H0z', // background
     ],
+    chevron_left: [
+        'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z', // chevron left
+        'M0 0h24v24H0z', // background
+    ],
+    chevron_right: [
+        'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z', // chevron right
+        'M0 0h24v24H0z', // background
+    ],
+    menu: [
+        'M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z', // hamburger menu
+        'M0 0h24v24H0z', // background
+    ],
     expand: [
         'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z', // plus
         'M0 0h24v24H0z', // background
@@ -970,6 +983,18 @@ const iconPaths = {
         'M19 13H5v-2h14v2z', // minus
         'M0 0h24v24H0z', // background
     ],
+    check: [
+        'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z', // checkmark
+        'M0 0h24v24H0z', // background
+    ],
+    radio_checked: [
+        'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z', // radio button checked
+        'M0 0h24v24H0z', // background
+    ],
+    radio_unchecked: [
+        'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z', // radio button unchecked
+        'M0 0h24v24H0z', // background
+    ],
     light_mode: [
         'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5M2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1m18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1M11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1m0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1M5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41zm12.4 12.4a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41zm1.06-11a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0zM7.05 18.4a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0z',
         'M0 0h24v24H0z', // background
@@ -7796,12 +7821,27 @@ const Sidenav = () => {
             document.body.style.overflow = isOpen && mode === 'overlay' ? 'hidden' : '';
         }
     };
+    const toggleExpanded = (attrs) => {
+        const newExpandedState = !(attrs.isExpanded !== false);
+        if (attrs.onExpandChange) {
+            attrs.onExpandChange(newExpandedState);
+        }
+    };
+    const toggleHamburger = (attrs) => {
+        const newOpenState = !state.isOpen;
+        if (attrs.onToggle) {
+            attrs.onToggle(newOpenState);
+        }
+    };
     return {
         oninit: ({ attrs }) => {
             state = {
                 id: attrs.id || uniqueId(),
                 isOpen: attrs.isOpen || false,
                 isAnimating: false,
+                isExpanded: attrs.isExpanded !== false,
+                activeItemIndex: null,
+                selectedSubmenuItems: new Map(),
             };
             // Set up keyboard listener
             if (typeof document !== 'undefined' && attrs.closeOnEscape !== false) {
@@ -7830,12 +7870,16 @@ const Sidenav = () => {
             }
         },
         view: ({ attrs, children }) => {
-            const { position = 'left', mode = 'overlay', width = 300, className = '', showBackdrop = true, animationDuration = 300, fixed = false, } = attrs;
+            const { position = 'left', mode = 'overlay', width = 300, className = '', showBackdrop = true, animationDuration = 300, fixed = false, showHamburger = false, expandable = false, } = attrs;
             const isOpen = state.isOpen;
+            const collapsedWidth = 60;
+            const isExpanded = attrs.isExpanded !== false;
+            const currentWidth = expandable && !isExpanded ? collapsedWidth : width;
             return [
-                // Backdrop (using existing materialize class)
+                // Backdrop (using existing materialize class) - only for overlay mode
                 showBackdrop &&
                     mode === 'overlay' &&
+                    !fixed &&
                     m('.sidenav-overlay', {
                         style: {
                             display: isOpen ? 'block' : 'none',
@@ -7846,49 +7890,206 @@ const Sidenav = () => {
                 // Sidenav (using existing materialize structure)
                 m('ul.sidenav', {
                     id: state.id,
-                    class: [position === 'right' ? 'right-aligned' : '', fixed ? 'sidenav-fixed' : '', className]
+                    class: [
+                        position === 'right' ? 'right-aligned' : '',
+                        fixed ? 'sidenav-fixed' : '',
+                        expandable && !isExpanded ? 'sidenav-collapsed' : '',
+                        className,
+                    ]
                         .filter(Boolean)
                         .join(' ') || undefined,
                     style: {
-                        width: `${width}px`,
+                        width: `${currentWidth}px`,
                         transform: isOpen ? 'translateX(0)' : position === 'left' ? 'translateX(-105%)' : 'translateX(105%)',
                         'transition-duration': `${animationDuration}ms`,
+                        'transition-property': 'transform, width',
                     },
-                }, children),
+                }, [
+                    // Hamburger toggle button (inside sidenav, at the top)
+                    showHamburger &&
+                        m('li.sidenav-hamburger-item', {
+                            style: {
+                                display: 'flex',
+                                'justify-content': position === 'right' ? 'flex-end' : 'flex-start',
+                                'align-items': 'center',
+                                padding: '12px 16px',
+                                cursor: 'pointer',
+                                'border-bottom': '1px solid rgba(0,0,0,0.1)',
+                            },
+                            onclick: () => toggleHamburger(attrs),
+                        }, m(MaterialIcon, {
+                            name: 'menu',
+                            style: { width: '24px', height: '24px' },
+                        })),
+                    // Expand/collapse toggle button (if expandable, right below hamburger)
+                    expandable &&
+                        m('li.sidenav-expand-toggle', {
+                            style: {
+                                display: 'flex',
+                                'justify-content': position === 'right' ? 'flex-end' : 'flex-start',
+                                'align-items': 'center',
+                                padding: '12px 16px',
+                                cursor: 'pointer',
+                                'border-bottom': '1px solid rgba(0,0,0,0.1)',
+                            },
+                            onclick: () => toggleExpanded(attrs),
+                        }, m(MaterialIcon, {
+                            name: position === 'right'
+                                ? (isExpanded ? 'chevron_right' : 'chevron_left')
+                                : (isExpanded ? 'chevron_left' : 'chevron_right'),
+                            style: { width: '24px', height: '24px' },
+                        })),
+                    // Children (menu items) - inject internal props
+                    Array.isArray(children)
+                        ? children.map((child) => {
+                            if (child && typeof child === 'object' && 'tag' in child) {
+                                // Clone the vnode and add internal props
+                                return Object.assign(Object.assign({}, child), { attrs: Object.assign(Object.assign({}, child.attrs), { _isExpanded: isExpanded, _position: position }) });
+                            }
+                            return child;
+                        })
+                        : children,
+                ]),
             ];
         },
     };
 };
+/**
+ * Sidenav Submenu Item Component
+ */
+const NavbarSubItem = () => {
+    return {
+        view: ({ attrs }) => {
+            const { text, icon, selected = false, value, onSelect, mode, isExpanded, position = 'left' } = attrs;
+            const handleClick = () => {
+                if (onSelect) {
+                    onSelect(value !== undefined ? value : text, !selected);
+                }
+            };
+            const isRightAligned = position === 'right';
+            const submenuContent = isRightAligned
+                ? [
+                    // Right-aligned: text on left, icons on right
+                    isExpanded && m('span', { style: { 'flex': '1', 'text-align': 'left' } }, text),
+                    icon && isExpanded && m('i.material-icons', { style: { 'font-size': '18px' } }, icon),
+                    m(MaterialIcon, {
+                        name: mode === 'checkbox' ? (selected ? 'check' : 'close') : selected ? 'radio_checked' : 'radio_unchecked',
+                        style: {
+                            width: '18px',
+                            height: '18px',
+                            opacity: mode === 'checkbox' && !selected ? '0.3' : '1',
+                        },
+                    }),
+                ]
+                : [
+                    // Left-aligned: indicator on left, text and icon on right
+                    m(MaterialIcon, {
+                        name: mode === 'checkbox' ? (selected ? 'check' : 'close') : selected ? 'radio_checked' : 'radio_unchecked',
+                        style: {
+                            width: '18px',
+                            height: '18px',
+                            opacity: mode === 'checkbox' && !selected ? '0.3' : '1',
+                        },
+                    }),
+                    icon && isExpanded && m('i.material-icons', { style: { 'font-size': '18px', 'margin-left': '8px' } }, icon),
+                    isExpanded && m('span', { style: { 'margin-left': icon ? '8px' : '8px' } }, text),
+                ];
+            return m('li.sidenav-subitem', {
+                class: selected ? 'selected' : '',
+                style: {
+                    padding: isExpanded ? '8px 16px 8px 48px' : '8px 16px',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    'align-items': 'center',
+                    gap: '8px',
+                    'font-size': '0.9em',
+                    'justify-content': isRightAligned ? 'space-between' : 'flex-start',
+                },
+                onclick: handleClick,
+            }, submenuContent);
+        },
+    };
+};
 /**
  * Sidenav Item Component
  * Individual items for the sidenav menu
  */
 const SidenavItem = () => {
+    let isSubmenuOpen = false;
     return {
         view: ({ attrs, children }) => {
-            const { text, icon, active = false, disabled = false, onclick, href, className = '', divider = false, subheader = false, } = attrs;
+            const { text, icon, active = false, disabled = false, onclick, href, className = '', divider = false, subheader = false, submenu = [], submenuMode = 'checkbox', } = attrs;
             if (divider) {
                 return m('li.divider');
             }
             if (subheader) {
                 return m('li.subheader', text || children);
             }
-            const itemClasses = [active ? 'active' : '', disabled ? 'disabled' : '', className].filter(Boolean).join(' ') || undefined;
-            const content = [icon && m('i.material-icons', icon), text || children];
-            if (href && !disabled) {
-                return m('li', { class: itemClasses }, [
+            const hasSubmenu = submenu && submenu.length > 0;
+            const itemClasses = [
+                active ? 'active' : '',
+                disabled ? 'disabled' : '',
+                hasSubmenu ? 'has-submenu' : '',
+                className,
+            ]
+                .filter(Boolean)
+                .join(' ') || undefined;
+            const handleMainClick = (e) => {
+                e.preventDefault();
+                if (hasSubmenu) {
+                    isSubmenuOpen = active ? !isSubmenuOpen : true;
+                }
+                if (onclick && !disabled) {
+                    onclick(e);
+                }
+            };
+            // Get internal props passed from parent Sidenav
+            const isExpanded = attrs._isExpanded !== false;
+            const position = attrs._position || 'left';
+            const isRightAligned = position === 'right';
+            // In expanded mode, icons are at the outside edge
+            // In collapsed mode, icons are centered
+            const content = isRightAligned
+                ? [
+                    // Right-aligned: text on left, icon on right
+                    isExpanded && m('span.sidenav-item-text', { style: { 'flex': '1', 'text-align': 'left', 'margin-right': '8px' } }, text || children),
+                    m('i.material-icons', { style: { 'min-width': '24px', 'width': '24px' } }, icon || ''),
+                ]
+                : [
+                    // Left-aligned: icon on left, text on right
+                    m('i.material-icons', { style: { 'min-width': '24px', 'width': '24px' } }, icon || ''),
+                    isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', 'flex': '1' } }, text || children),
+                ];
+            const linkStyle = {
+                display: 'flex',
+                'align-items': 'center',
+                padding: isExpanded ? '12px 16px' : '12px 18px',
+                'justify-content': isExpanded ? (isRightAligned ? 'flex-end' : 'flex-start') : 'center',
+            };
+            const mainItem = href && !disabled
+                ? m('li', { class: itemClasses }, [
                     m('a', {
                         href,
-                        onclick: disabled ? undefined : onclick,
+                        onclick: handleMainClick,
+                        style: linkStyle,
+                    }, content),
+                ])
+                : m('li', { class: itemClasses }, [
+                    m('a', {
+                        onclick: handleMainClick,
+                        href: '#!',
+                        style: linkStyle,
                     }, content),
                 ]);
+            // Return main item with submenu if applicable
+            if (hasSubmenu && active && isSubmenuOpen) {
+                return [
+                    mainItem,
+                    submenu.map((subItem) => m(NavbarSubItem, Object.assign(Object.assign({}, subItem), { mode: submenuMode, isExpanded,
+                        position }))),
+                ];
             }
-            return m('li', { class: itemClasses }, [
-                m('a', {
-                    onclick: disabled ? undefined : onclick,
-                    href: '#!',
-                }, content),
-            ]);
+            return mainItem;
         },
     };
 };

package/dist/index.js

@@ -266,6 +266,7 @@ const Autocomplete = () => {
             state.isOpen = false;
             state.selectedIndex = -1;
         }
+        m.redraw();
     };
     const getDropdownStyles = () => {
         if (!state.inputElement) {
@@ -964,6 +965,18 @@ const iconPaths = {
         'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z', // chevron down
         'M0 0h24v24H0z', // background
     ],
+    chevron_left: [
+        'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z', // chevron left
+        'M0 0h24v24H0z', // background
+    ],
+    chevron_right: [
+        'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z', // chevron right
+        'M0 0h24v24H0z', // background
+    ],
+    menu: [
+        'M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z', // hamburger menu
+        'M0 0h24v24H0z', // background
+    ],
     expand: [
         'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z', // plus
         'M0 0h24v24H0z', // background
@@ -972,6 +985,18 @@ const iconPaths = {
         'M19 13H5v-2h14v2z', // minus
         'M0 0h24v24H0z', // background
     ],
+    check: [
+        'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z', // checkmark
+        'M0 0h24v24H0z', // background
+    ],
+    radio_checked: [
+        'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z', // radio button checked
+        'M0 0h24v24H0z', // background
+    ],
+    radio_unchecked: [
+        'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z', // radio button unchecked
+        'M0 0h24v24H0z', // background
+    ],
     light_mode: [
         'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5M2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1m18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1M11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1m0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1M5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41zm12.4 12.4a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41zm1.06-11a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0zM7.05 18.4a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0z',
         'M0 0h24v24H0z', // background
@@ -7798,12 +7823,27 @@ const Sidenav = () => {
             document.body.style.overflow = isOpen && mode === 'overlay' ? 'hidden' : '';
         }
     };
+    const toggleExpanded = (attrs) => {
+        const newExpandedState = !(attrs.isExpanded !== false);
+        if (attrs.onExpandChange) {
+            attrs.onExpandChange(newExpandedState);
+        }
+    };
+    const toggleHamburger = (attrs) => {
+        const newOpenState = !state.isOpen;
+        if (attrs.onToggle) {
+            attrs.onToggle(newOpenState);
+        }
+    };
     return {
         oninit: ({ attrs }) => {
             state = {
                 id: attrs.id || uniqueId(),
                 isOpen: attrs.isOpen || false,
                 isAnimating: false,
+                isExpanded: attrs.isExpanded !== false,
+                activeItemIndex: null,
+                selectedSubmenuItems: new Map(),
             };
             // Set up keyboard listener
             if (typeof document !== 'undefined' && attrs.closeOnEscape !== false) {
@@ -7832,12 +7872,16 @@ const Sidenav = () => {
             }
         },
         view: ({ attrs, children }) => {
-            const { position = 'left', mode = 'overlay', width = 300, className = '', showBackdrop = true, animationDuration = 300, fixed = false, } = attrs;
+            const { position = 'left', mode = 'overlay', width = 300, className = '', showBackdrop = true, animationDuration = 300, fixed = false, showHamburger = false, expandable = false, } = attrs;
             const isOpen = state.isOpen;
+            const collapsedWidth = 60;
+            const isExpanded = attrs.isExpanded !== false;
+            const currentWidth = expandable && !isExpanded ? collapsedWidth : width;
             return [
-                // Backdrop (using existing materialize class)
+                // Backdrop (using existing materialize class) - only for overlay mode
                 showBackdrop &&
                     mode === 'overlay' &&
+                    !fixed &&
                     m('.sidenav-overlay', {
                         style: {
                             display: isOpen ? 'block' : 'none',
@@ -7848,49 +7892,206 @@ const Sidenav = () => {
                 // Sidenav (using existing materialize structure)
                 m('ul.sidenav', {
                     id: state.id,
-                    class: [position === 'right' ? 'right-aligned' : '', fixed ? 'sidenav-fixed' : '', className]
+                    class: [
+                        position === 'right' ? 'right-aligned' : '',
+                        fixed ? 'sidenav-fixed' : '',
+                        expandable && !isExpanded ? 'sidenav-collapsed' : '',
+                        className,
+                    ]
                         .filter(Boolean)
                         .join(' ') || undefined,
                     style: {
-                        width: `${width}px`,
+                        width: `${currentWidth}px`,
                         transform: isOpen ? 'translateX(0)' : position === 'left' ? 'translateX(-105%)' : 'translateX(105%)',
                         'transition-duration': `${animationDuration}ms`,
+                        'transition-property': 'transform, width',
                     },
-                }, children),
+                }, [
+                    // Hamburger toggle button (inside sidenav, at the top)
+                    showHamburger &&
+                        m('li.sidenav-hamburger-item', {
+                            style: {
+                                display: 'flex',
+                                'justify-content': position === 'right' ? 'flex-end' : 'flex-start',
+                                'align-items': 'center',
+                                padding: '12px 16px',
+                                cursor: 'pointer',
+                                'border-bottom': '1px solid rgba(0,0,0,0.1)',
+                            },
+                            onclick: () => toggleHamburger(attrs),
+                        }, m(MaterialIcon, {
+                            name: 'menu',
+                            style: { width: '24px', height: '24px' },
+                        })),
+                    // Expand/collapse toggle button (if expandable, right below hamburger)
+                    expandable &&
+                        m('li.sidenav-expand-toggle', {
+                            style: {
+                                display: 'flex',
+                                'justify-content': position === 'right' ? 'flex-end' : 'flex-start',
+                                'align-items': 'center',
+                                padding: '12px 16px',
+                                cursor: 'pointer',
+                                'border-bottom': '1px solid rgba(0,0,0,0.1)',
+                            },
+                            onclick: () => toggleExpanded(attrs),
+                        }, m(MaterialIcon, {
+                            name: position === 'right'
+                                ? (isExpanded ? 'chevron_right' : 'chevron_left')
+                                : (isExpanded ? 'chevron_left' : 'chevron_right'),
+                            style: { width: '24px', height: '24px' },
+                        })),
+                    // Children (menu items) - inject internal props
+                    Array.isArray(children)
+                        ? children.map((child) => {
+                            if (child && typeof child === 'object' && 'tag' in child) {
+                                // Clone the vnode and add internal props
+                                return Object.assign(Object.assign({}, child), { attrs: Object.assign(Object.assign({}, child.attrs), { _isExpanded: isExpanded, _position: position }) });
+                            }
+                            return child;
+                        })
+                        : children,
+                ]),
             ];
         },
     };
 };
+/**
+ * Sidenav Submenu Item Component
+ */
+const NavbarSubItem = () => {
+    return {
+        view: ({ attrs }) => {
+            const { text, icon, selected = false, value, onSelect, mode, isExpanded, position = 'left' } = attrs;
+            const handleClick = () => {
+                if (onSelect) {
+                    onSelect(value !== undefined ? value : text, !selected);
+                }
+            };
+            const isRightAligned = position === 'right';
+            const submenuContent = isRightAligned
+                ? [
+                    // Right-aligned: text on left, icons on right
+                    isExpanded && m('span', { style: { 'flex': '1', 'text-align': 'left' } }, text),
+                    icon && isExpanded && m('i.material-icons', { style: { 'font-size': '18px' } }, icon),
+                    m(MaterialIcon, {
+                        name: mode === 'checkbox' ? (selected ? 'check' : 'close') : selected ? 'radio_checked' : 'radio_unchecked',
+                        style: {
+                            width: '18px',
+                            height: '18px',
+                            opacity: mode === 'checkbox' && !selected ? '0.3' : '1',
+                        },
+                    }),
+                ]
+                : [
+                    // Left-aligned: indicator on left, text and icon on right
+                    m(MaterialIcon, {
+                        name: mode === 'checkbox' ? (selected ? 'check' : 'close') : selected ? 'radio_checked' : 'radio_unchecked',
+                        style: {
+                            width: '18px',
+                            height: '18px',
+                            opacity: mode === 'checkbox' && !selected ? '0.3' : '1',
+                        },
+                    }),
+                    icon && isExpanded && m('i.material-icons', { style: { 'font-size': '18px', 'margin-left': '8px' } }, icon),
+                    isExpanded && m('span', { style: { 'margin-left': icon ? '8px' : '8px' } }, text),
+                ];
+            return m('li.sidenav-subitem', {
+                class: selected ? 'selected' : '',
+                style: {
+                    padding: isExpanded ? '8px 16px 8px 48px' : '8px 16px',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    'align-items': 'center',
+                    gap: '8px',
+                    'font-size': '0.9em',
+                    'justify-content': isRightAligned ? 'space-between' : 'flex-start',
+                },
+                onclick: handleClick,
+            }, submenuContent);
+        },
+    };
+};
 /**
  * Sidenav Item Component
  * Individual items for the sidenav menu
  */
 const SidenavItem = () => {
+    let isSubmenuOpen = false;
     return {
         view: ({ attrs, children }) => {
-            const { text, icon, active = false, disabled = false, onclick, href, className = '', divider = false, subheader = false, } = attrs;
+            const { text, icon, active = false, disabled = false, onclick, href, className = '', divider = false, subheader = false, submenu = [], submenuMode = 'checkbox', } = attrs;
             if (divider) {
                 return m('li.divider');
             }
             if (subheader) {
                 return m('li.subheader', text || children);
             }
-            const itemClasses = [active ? 'active' : '', disabled ? 'disabled' : '', className].filter(Boolean).join(' ') || undefined;
-            const content = [icon && m('i.material-icons', icon), text || children];
-            if (href && !disabled) {
-                return m('li', { class: itemClasses }, [
+            const hasSubmenu = submenu && submenu.length > 0;
+            const itemClasses = [
+                active ? 'active' : '',
+                disabled ? 'disabled' : '',
+                hasSubmenu ? 'has-submenu' : '',
+                className,
+            ]
+                .filter(Boolean)
+                .join(' ') || undefined;
+            const handleMainClick = (e) => {
+                e.preventDefault();
+                if (hasSubmenu) {
+                    isSubmenuOpen = active ? !isSubmenuOpen : true;
+                }
+                if (onclick && !disabled) {
+                    onclick(e);
+                }
+            };
+            // Get internal props passed from parent Sidenav
+            const isExpanded = attrs._isExpanded !== false;
+            const position = attrs._position || 'left';
+            const isRightAligned = position === 'right';
+            // In expanded mode, icons are at the outside edge
+            // In collapsed mode, icons are centered
+            const content = isRightAligned
+                ? [
+                    // Right-aligned: text on left, icon on right
+                    isExpanded && m('span.sidenav-item-text', { style: { 'flex': '1', 'text-align': 'left', 'margin-right': '8px' } }, text || children),
+                    m('i.material-icons', { style: { 'min-width': '24px', 'width': '24px' } }, icon || ''),
+                ]
+                : [
+                    // Left-aligned: icon on left, text on right
+                    m('i.material-icons', { style: { 'min-width': '24px', 'width': '24px' } }, icon || ''),
+                    isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', 'flex': '1' } }, text || children),
+                ];
+            const linkStyle = {
+                display: 'flex',
+                'align-items': 'center',
+                padding: isExpanded ? '12px 16px' : '12px 18px',
+                'justify-content': isExpanded ? (isRightAligned ? 'flex-end' : 'flex-start') : 'center',
+            };
+            const mainItem = href && !disabled
+                ? m('li', { class: itemClasses }, [
                     m('a', {
                         href,
-                        onclick: disabled ? undefined : onclick,
+                        onclick: handleMainClick,
+                        style: linkStyle,
+                    }, content),
+                ])
+                : m('li', { class: itemClasses }, [
+                    m('a', {
+                        onclick: handleMainClick,
+                        href: '#!',
+                        style: linkStyle,
                     }, content),
                 ]);
+            // Return main item with submenu if applicable
+            if (hasSubmenu && active && isSubmenuOpen) {
+                return [
+                    mainItem,
+                    submenu.map((subItem) => m(NavbarSubItem, Object.assign(Object.assign({}, subItem), { mode: submenuMode, isExpanded,
+                        position }))),
+                ];
             }
-            return m('li', { class: itemClasses }, [
-                m('a', {
-                    onclick: disabled ? undefined : onclick,
-                    href: '#!',
-                }, content),
-            ]);
+            return mainItem;
         },
     };
 };