mithril-materialized 3.5.3 → 3.5.4

package/dist/index.umd.js

@@ -7814,6 +7814,66 @@
         };
     };
 
+    // 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'
+    ];
+    /**
+     * Helper function to render icons based on IconDefinition type
+     */
+    const renderIcon = (icon, style) => {
+        if (!icon)
+            return null;
+        if (typeof icon === 'string') {
+            // Check if this is a MaterialIcon SVG name
+            if (materialIconSvgNames.includes(icon)) {
+                return m(MaterialIcon, { name: icon, style });
+            }
+            // Fall back to Material Icons font for other icon names
+            return m('i.material-icons', { style }, icon);
+        }
+        if (icon.type === 'svg') {
+            // Inline SVG
+            return m.trust(icon.content);
+        }
+        if (icon.type === 'image') {
+            // Image URL
+            return m('img', {
+                src: icon.content,
+                style: Object.assign(Object.assign({}, style), { width: '24px', height: '24px', objectFit: 'contain' }),
+            });
+        }
+        return null;
+    };
+    /**
+     * Helper function to render a single sidenav item (for header/footer items)
+     */
+    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));
+    };
     /**
      * Sidenav Component
      * A responsive navigation drawer that slides in from the side
@@ -7936,6 +7996,8 @@
                                 name: 'menu',
                                 style: { width: '24px', height: '24px' },
                             })),
+                        // Header item (if provided, appears before expand/collapse toggle)
+                        attrs.header && renderSidenavItem(attrs.header, isExpanded, position),
                         // Expand/collapse toggle button (if expandable, right below hamburger)
                         expandable &&
                             m('li.sidenav-expand-toggle', {
@@ -7964,6 +8026,8 @@
                                 return child;
                             })
                             : children,
+                        // Footer item (if provided, appears at the bottom)
+                        attrs.footer && renderSidenavItem(attrs.footer, isExpanded, position),
                     ]),
                 ];
             },
@@ -7982,43 +8046,42 @@
                     }
                 };
                 const isRightAligned = position === 'right';
+                // Render indicator icon for checkbox/radio modes
+                const indicatorIcon = mode !== 'none'
+                    ? 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',
+                        },
+                    })
+                    : null;
                 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',
-                            },
-                        }),
+                        icon && isExpanded && renderIcon(icon, { 'font-size': '18px' }),
+                        indicatorIcon,
                     ]
                     : [
                         // 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),
+                        indicatorIcon,
+                        icon && isExpanded && renderIcon(icon, { 'font-size': '18px', 'margin-left': indicatorIcon ? '8px' : '0' }),
+                        isExpanded && m('span', { style: { 'margin-left': icon || indicatorIcon ? '8px' : '0' } }, text),
                     ];
                 return m('li.sidenav-subitem', {
                     class: selected ? 'selected' : '',
                     style: {
-                        padding: isExpanded ? '8px 16px 8px 48px' : '8px 16px',
+                        padding: isExpanded ? '0 16px 0 48px' : '0 16px',
                         cursor: 'pointer',
                         display: 'flex',
                         'align-items': 'center',
                         gap: '8px',
                         'font-size': '0.9em',
                         'justify-content': isRightAligned ? 'space-between' : 'flex-start',
+                        height: '48px',
+                        'min-height': '48px',
                     },
                     onclick: handleClick,
                 }, submenuContent);
@@ -8050,8 +8113,8 @@
                     .filter(Boolean)
                     .join(' ') || undefined;
                 const handleMainClick = (e) => {
-                    e.preventDefault();
                     if (hasSubmenu) {
+                        e.preventDefault();
                         isSubmenuOpen = active ? !isSubmenuOpen : true;
                     }
                     if (onclick && !disabled) {
@@ -8068,11 +8131,11 @@
                     ? [
                         // 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 || ''),
+                        renderIcon(icon, { 'min-width': '24px', 'width': '24px' }),
                     ]
                     : [
                         // Left-aligned: icon on left, text on right
-                        m('i.material-icons', { style: { 'min-width': '24px', 'width': '24px' } }, icon || ''),
+                        renderIcon(icon, { 'min-width': '24px', 'width': '24px' }),
                         isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', 'flex': '1' } }, text || children),
                     ];
                 const linkStyle = {

package/dist/sidenav.d.ts

@@ -1,9 +1,14 @@
 import { FactoryComponent, Attributes } from 'mithril';
+/** Icon definition - supports material icon name, inline SVG, or image URL */
+export type IconDefinition = string | {
+    type: 'svg' | 'image';
+    content: string;
+};
 export interface NavbarSubItemAttrs {
     /** Text content of the submenu item */
     text: string;
-    /** Optional icon name */
-    icon?: string;
+    /** Optional icon - material icon name, SVG object, or image object */
+    icon?: IconDefinition;
     /** Whether this submenu item is selected */
     selected?: boolean;
     /** Value for the submenu item */
@@ -46,12 +51,16 @@ export interface SidenavAttrs extends Attributes {
     isExpanded?: boolean;
     /** Callback when expand state changes */
     onExpandChange?: (expanded: boolean) => void;
+    /** Header item displayed before expand/collapse toggle */
+    header?: SidenavItemAttrs;
+    /** Footer item displayed at the bottom of the sidenav */
+    footer?: SidenavItemAttrs;
 }
 export interface SidenavItemAttrs {
     /** Text content of the item */
     text?: string;
-    /** Icon name (material icons) */
-    icon?: string;
+    /** Icon - material icon name, SVG object, or image object */
+    icon?: IconDefinition;
     /** Whether this item is active */
     active?: boolean;
     /** Whether this item is disabled */
@@ -68,8 +77,8 @@ export interface SidenavItemAttrs {
     subheader?: boolean;
     /** Submenu items */
     submenu?: NavbarSubItemAttrs[];
-    /** Submenu selection mode */
-    submenuMode?: 'checkbox' | 'radio';
+    /** Submenu selection mode - 'checkbox' for multi-select, 'radio' for single-select, 'none' for no indicators */
+    submenuMode?: 'checkbox' | 'radio' | 'none';
     /** @internal - Whether the sidenav is expanded (passed from parent) */
     _isExpanded?: boolean;
     /** @internal - Position of the sidenav (passed from parent) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "3.5.3",
+  "version": "3.5.4",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -75,10 +75,10 @@
     "mithril": "^2.3.7"
   },
   "devDependencies": {
-    "@playwright/test": "^1.55.0",
-    "@rollup/plugin-typescript": "^12.1.4",
+    "@playwright/test": "^1.56.1",
+    "@rollup/plugin-typescript": "^12.3.0",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
     "@types/mithril": "^2.2.7",
@@ -86,16 +86,16 @@
     "concurrently": "^9.2.1",
     "express": "^5.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^30.1.3",
-    "jest-environment-jsdom": "^30.1.2",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
     "js-yaml": "^4.1.0",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.50.1",
+    "rimraf": "^6.1.0",
+    "rollup": "^4.52.5",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.92.1",
-    "ts-jest": "^29.4.1",
+    "sass": "^1.93.2",
+    "ts-jest": "^29.4.5",
     "tslib": "^2.8.1",
-    "typedoc": "^0.28.12",
-    "typescript": "^5.9.2"
+    "typedoc": "^0.28.14",
+    "typescript": "^5.9.3"
   }
 }

package/sass/components/_navbar.scss

@@ -217,3 +217,26 @@ nav {
     height: variables.$navbar-height;
   }
 }
+
+// Dark theme support
+[data-theme="dark"] {
+  nav ul li.active {
+    background-color: rgba(38, 166, 154, 0.2);
+
+    a {
+      color: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
+    }
+
+    i, .material-icons {
+      color: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
+    }
+  }
+}
+
+// Make menu items non-selectable by default
+nav ul li {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}

package/sass/components/_sidenav.scss

@@ -193,14 +193,17 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
     &:hover { background-color: var(--mm-border-color, rgba(0,0,0,.05));}
 
-    // color: var(--mm-text-primary, variables.$sidenav-font-color);
-    color: var(--mm-nav-active-text, #fff);
+    color: var(--mm-text-primary, variables.$sidenav-font-color);
     display: block;
     font-size: variables.$sidenav-font-size;
     font-weight: 500;
     height: variables.$sidenav-item-height;
     line-height: variables.$sidenav-line-height;
     padding: 0 (variables.$sidenav-padding * 2);
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
 
     & > i,
     & > [class^="mdi-"], li > a > [class*="mdi-"],
@@ -215,6 +218,17 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
     }
   }
 
+  // Active menu item styling
+  li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
+    color: var(--mm-nav-active-text, #fff);
+    background-color: var(--mm-primary-color, #26a69a);
+
+    & > i,
+    & > i.material-icons {
+      color: var(--mm-nav-active-text, #fff);
+    }
+  }
+
   // Stlye btn anchors
   li > .btn, li > .btn-large, li > .btn-flat, li > .btn-floating {
     margin: 10px (variables.$sidenav-padding * 2);
@@ -452,17 +466,25 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
 .sidenav-subitem {
   list-style: none;
   transition: background-color 0.2s ease;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
 
   &:hover {
     background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
   }
 
-  // Don't show selected background - only the check/radio icon indicates selection
-  // to avoid confusion with multiple active menu items
   &.selected {
+    background-color: var(--mm-primary-color-light, rgba(38, 166, 154, 0.15));
+
     svg {
       fill: var(--mm-primary-color, #26a69a);
     }
+
+    i.material-icons {
+      color: var(--mm-primary-color, #26a69a);
+    }
   }
 
   svg {
@@ -510,24 +532,24 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
     }
 
     li.active {
-      background-color: rgba(255, 255, 255, 0.05);
+      background-color: var(--mm-primary-color, #26a69a);
 
       & > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
-        color: var(--mm-nav-active-text, #fff);
+        color: #000;
 
         & > i,
         & > i.material-icons {
-          color: var(--mm-nav-active-text, #fff);
+          color: #000;
         }
       }
     }
 
     .collapsible-body > ul:not(.collapsible) > li.active a {
-      color: var(--mm-nav-active-text, #fff);
+      color: #000;
 
       i,
       i.material-icons {
-        color: var(--mm-nav-active-text, #fff);
+        color: #000;
       }
     }
 
@@ -552,6 +574,19 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
     i.material-icons {
       color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
     }
+
+    &.selected {
+      background-color: rgba(38, 166, 154, 0.2);
+      color: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
+
+      svg {
+        fill: var(--mm-primary-color, #26a69a);
+      }
+
+      i.material-icons {
+        color: var(--mm-primary-color, #26a69a);
+      }
+    }
   }
 }
 

package/sass/components/_theme-variables.scss

@@ -123,7 +123,7 @@ body {
   // Navigation colors
   --mm-nav-background: #1e1e1e;
   --mm-nav-text: #ffffff;
-  --mm-nav-active-text: #000000;
+  --mm-nav-active-text: #ffffff;
   
   // Modal and overlay colors
   --mm-modal-background: #2d2d2d;