mithril-materialized 3.5.4 → 3.5.5

package/dist/index.umd.js

@@ -7816,9 +7816,19 @@
 
     // List of MaterialIcon SVG icons that are available
     const materialIconSvgNames = [
-        'caret', 'close', 'chevron', 'chevron_left', 'chevron_right', 'menu',
-        'expand', 'collapse', 'check', 'radio_checked', 'radio_unchecked',
-        'light_mode', 'dark_mode'
+        'caret',
+        'close',
+        'chevron',
+        'chevron_left',
+        'chevron_right',
+        'menu',
+        'expand',
+        'collapse',
+        'check',
+        'radio_checked',
+        'radio_unchecked',
+        'light_mode',
+        'dark_mode',
     ];
     /**
      * Helper function to render icons based on IconDefinition type
@@ -7848,31 +7858,42 @@
         return null;
     };
     /**
-     * Helper function to render a single sidenav item (for header/footer items)
+     * Sidenav Header/Footer Item Component
      */
-    const renderSidenavItem = (item, isExpanded, position) => {
-        const { text, icon, onclick, href, className = '' } = item;
-        const isRightAligned = position === 'right';
-        const content = isRightAligned
-            ? [
-                isExpanded && m('span.sidenav-item-text', { style: { 'flex': '1', 'text-align': 'left', 'margin-right': '8px' } }, text),
-                renderIcon(icon, { 'min-width': '24px', 'width': '24px' }),
-            ]
-            : [
-                renderIcon(icon, { 'min-width': '24px', 'width': '24px' }),
-                isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', 'flex': '1' } }, text),
-            ];
-        const linkStyle = {
-            display: 'flex',
-            'align-items': 'center',
-            padding: isExpanded ? '12px 16px' : '12px 18px',
-            'justify-content': isExpanded ? (isRightAligned ? 'flex-end' : 'flex-start') : 'center',
-        };
-        return m('li', { class: className }, m('a', {
-            href: href || '#!',
-            onclick: onclick,
-            style: linkStyle,
-        }, content));
+    const SidenavHeaderFooterItem = () => {
+        return {
+            view: ({ attrs }) => {
+                const { text, icon, onclick, href, className = '', _isExpanded = true, _position = 'left' } = attrs;
+                const isRightAligned = _position === 'right';
+                const handleClick = (e) => {
+                    if (onclick) {
+                        e.preventDefault();
+                        onclick(e);
+                    }
+                };
+                const content = isRightAligned
+                    ? [
+                        _isExpanded &&
+                            m('span.sidenav-item-text', { style: { flex: '1', 'text-align': 'left', 'margin-right': '8px' } }, text),
+                        renderIcon(icon, { 'min-width': '24px', width: '24px' }),
+                    ]
+                    : [
+                        renderIcon(icon, { 'min-width': '24px', width: '24px' }),
+                        _isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', flex: '1' } }, text),
+                    ];
+                const linkStyle = {
+                    display: 'flex',
+                    'align-items': 'center',
+                    padding: _isExpanded ? '12px 16px' : '12px 18px',
+                    'justify-content': _isExpanded ? (isRightAligned ? 'flex-end' : 'flex-start') : 'center',
+                };
+                return m('li', { class: className }, m('a', {
+                    href: href || '#!',
+                    onclick: handleClick,
+                    style: linkStyle,
+                }, content));
+            },
+        };
     };
     /**
      * Sidenav Component
@@ -7997,7 +8018,8 @@
                                 style: { width: '24px', height: '24px' },
                             })),
                         // Header item (if provided, appears before expand/collapse toggle)
-                        attrs.header && renderSidenavItem(attrs.header, isExpanded, position),
+                        attrs.header &&
+                            m(SidenavHeaderFooterItem, Object.assign(Object.assign({}, attrs.header), { _isExpanded: isExpanded, _position: position })),
                         // Expand/collapse toggle button (if expandable, right below hamburger)
                         expandable &&
                             m('li.sidenav-expand-toggle', {
@@ -8012,8 +8034,12 @@
                                 onclick: () => toggleExpanded(attrs),
                             }, m(MaterialIcon, {
                                 name: position === 'right'
-                                    ? (isExpanded ? 'chevron_right' : 'chevron_left')
-                                    : (isExpanded ? 'chevron_left' : 'chevron_right'),
+                                    ? isExpanded
+                                        ? 'chevron_right'
+                                        : 'chevron_left'
+                                    : isExpanded
+                                        ? 'chevron_left'
+                                        : 'chevron_right',
                                 style: { width: '24px', height: '24px' },
                             })),
                         // Children (menu items) - inject internal props
@@ -8027,7 +8053,8 @@
                             })
                             : children,
                         // Footer item (if provided, appears at the bottom)
-                        attrs.footer && renderSidenavItem(attrs.footer, isExpanded, position),
+                        attrs.footer &&
+                            m(SidenavHeaderFooterItem, Object.assign(Object.assign({}, attrs.footer), { _isExpanded: isExpanded, _position: position, className: 'sidenav-footer-item' })),
                     ]),
                 ];
             },
@@ -8060,7 +8087,7 @@
                 const submenuContent = isRightAligned
                     ? [
                         // Right-aligned: text on left, icons on right
-                        isExpanded && m('span', { style: { 'flex': '1', 'text-align': 'left' } }, text),
+                        isExpanded && m('span', { style: { flex: '1', 'text-align': 'left' } }, text),
                         icon && isExpanded && renderIcon(icon, { 'font-size': '18px' }),
                         indicatorIcon,
                     ]
@@ -8104,12 +8131,7 @@
                     return m('li.subheader', text || children);
                 }
                 const hasSubmenu = submenu && submenu.length > 0;
-                const itemClasses = [
-                    active ? 'active' : '',
-                    disabled ? 'disabled' : '',
-                    hasSubmenu ? 'has-submenu' : '',
-                    className,
-                ]
+                const itemClasses = [active ? 'active' : '', disabled ? 'disabled' : '', hasSubmenu ? 'has-submenu' : '', className]
                     .filter(Boolean)
                     .join(' ') || undefined;
                 const handleMainClick = (e) => {
@@ -8118,6 +8140,7 @@
                         isSubmenuOpen = active ? !isSubmenuOpen : true;
                     }
                     if (onclick && !disabled) {
+                        e.preventDefault();
                         onclick(e);
                     }
                 };
@@ -8130,13 +8153,14 @@
                 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),
-                        renderIcon(icon, { 'min-width': '24px', 'width': '24px' }),
+                        isExpanded &&
+                            m('span.sidenav-item-text', { style: { flex: '1', 'text-align': 'left', 'margin-right': '8px' } }, text || children),
+                        renderIcon(icon, { 'min-width': '24px', width: '24px' }),
                     ]
                     : [
                         // Left-aligned: icon on left, text on right
-                        renderIcon(icon, { 'min-width': '24px', 'width': '24px' }),
-                        isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', 'flex': '1' } }, text || children),
+                        renderIcon(icon, { 'min-width': '24px', width: '24px' }),
+                        isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', flex: '1' } }, text || children),
                     ];
                 const linkStyle = {
                     display: 'flex',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "3.5.4",
+  "version": "3.5.5",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/sass/components/_sidenav.scss

@@ -130,6 +130,8 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   backface-visibility: hidden;
   transform: translateX(-105%);
   transition: transform 0.3s ease, left 0.3s ease, right 0.3s ease;
+  display: flex;
+  flex-direction: column;
 
   @extend .z-depth-1 !optional;
   
@@ -590,6 +592,11 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   }
 }
 
+// Footer item positioning
+.sidenav-footer-item {
+  margin-top: auto;
+}
+
 // Animation for smooth width transitions
 .sidenav {
   transition: transform 0.3s ease, width 0.3s ease;