mithril-materialized 3.5.3 → 3.5.4

package/dist/advanced.css

@@ -911,13 +911,17 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   background-color: var(--mm-border-color, rgba(0, 0, 0, 0.05));
 }
 .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
-  color: var(--mm-nav-active-text, #fff);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
   display: block;
   font-size: 14px;
   font-weight: 500;
   height: 48px;
   line-height: 48px;
   padding: 0 32px;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
 }
 .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > [class^=mdi-], .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) li > a > [class*=mdi-], .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
   float: left;
@@ -928,6 +932,13 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
   user-select: none;
 }
+.sidenav 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);
+}
+.sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
+  color: var(--mm-nav-active-text, #fff);
+}
 .sidenav li > .btn, .sidenav li > .btn-large, .sidenav li > .btn-flat, .sidenav li > .btn-floating {
   margin: 10px 32px;
 }
@@ -1119,13 +1130,23 @@ 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;
 }
 .sidenav-subitem:hover {
   background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
 }
+.sidenav-subitem.selected {
+  background-color: var(--mm-primary-color-light, rgba(38, 166, 154, 0.15));
+}
 .sidenav-subitem.selected svg {
   fill: var(--mm-primary-color, #26a69a);
 }
+.sidenav-subitem.selected i.material-icons {
+  color: var(--mm-primary-color, #26a69a);
+}
 .sidenav-subitem svg {
   fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
   transition: fill 0.2s ease;
@@ -1158,20 +1179,20 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
 }
 [data-theme=dark] .sidenav li.active {
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: var(--mm-primary-color, #26a69a);
 }
 [data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
-  color: var(--mm-nav-active-text, #fff);
+  color: #000;
 }
 [data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, [data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
-  color: var(--mm-nav-active-text, #fff);
+  color: #000;
 }
 [data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a {
-  color: var(--mm-nav-active-text, #fff);
+  color: #000;
 }
 [data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a i,
 [data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a i.material-icons {
-  color: var(--mm-nav-active-text, #fff);
+  color: #000;
 }
 [data-theme=dark] .sidenav .subheader {
   color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
@@ -1188,6 +1209,16 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
 [data-theme=dark] .sidenav-subitem i.material-icons {
   color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
 }
+[data-theme=dark] .sidenav-subitem.selected {
+  background-color: rgba(38, 166, 154, 0.2);
+  color: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
+}
+[data-theme=dark] .sidenav-subitem.selected svg {
+  fill: var(--mm-primary-color, #26a69a);
+}
+[data-theme=dark] .sidenav-subitem.selected i.material-icons {
+  color: var(--mm-primary-color, #26a69a);
+}
 
 .sidenav {
   transition: transform 0.3s ease, width 0.3s ease;
@@ -1375,6 +1406,23 @@ nav .input-field label.active i {
     height: 64px;
   }
 }
+[data-theme=dark] nav ul li.active {
+  background-color: rgba(38, 166, 154, 0.2);
+}
+[data-theme=dark] nav ul li.active a {
+  color: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
+}
+[data-theme=dark] nav ul li.active i, [data-theme=dark] nav ul li.active .material-icons {
+  color: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
+}
+
+nav ul li {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
 /*
     @license
     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.

package/dist/components.css

@@ -1664,13 +1664,17 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   background-color: var(--mm-border-color, rgba(0, 0, 0, 0.05));
 }
 .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
-  color: var(--mm-nav-active-text, #fff);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
   display: block;
   font-size: 14px;
   font-weight: 500;
   height: 48px;
   line-height: 48px;
   padding: 0 32px;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
 }
 .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > [class^=mdi-], .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) li > a > [class*=mdi-], .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
   float: left;
@@ -1681,6 +1685,13 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
   user-select: none;
 }
+.sidenav 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);
+}
+.sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
+  color: var(--mm-nav-active-text, #fff);
+}
 .sidenav li > .btn, .sidenav li > .btn-large, .sidenav li > .btn-flat, .sidenav li > .btn-floating {
   margin: 10px 32px;
 }
@@ -1872,13 +1883,23 @@ 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;
 }
 .sidenav-subitem:hover {
   background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
 }
+.sidenav-subitem.selected {
+  background-color: var(--mm-primary-color-light, rgba(38, 166, 154, 0.15));
+}
 .sidenav-subitem.selected svg {
   fill: var(--mm-primary-color, #26a69a);
 }
+.sidenav-subitem.selected i.material-icons {
+  color: var(--mm-primary-color, #26a69a);
+}
 .sidenav-subitem svg {
   fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
   transition: fill 0.2s ease;
@@ -1911,20 +1932,20 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
 }
 [data-theme=dark] .sidenav li.active {
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: var(--mm-primary-color, #26a69a);
 }
 [data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
-  color: var(--mm-nav-active-text, #fff);
+  color: #000;
 }
 [data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, [data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
-  color: var(--mm-nav-active-text, #fff);
+  color: #000;
 }
 [data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a {
-  color: var(--mm-nav-active-text, #fff);
+  color: #000;
 }
 [data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a i,
 [data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a i.material-icons {
-  color: var(--mm-nav-active-text, #fff);
+  color: #000;
 }
 [data-theme=dark] .sidenav .subheader {
   color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
@@ -1941,6 +1962,16 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
 [data-theme=dark] .sidenav-subitem i.material-icons {
   color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
 }
+[data-theme=dark] .sidenav-subitem.selected {
+  background-color: rgba(38, 166, 154, 0.2);
+  color: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
+}
+[data-theme=dark] .sidenav-subitem.selected svg {
+  fill: var(--mm-primary-color, #26a69a);
+}
+[data-theme=dark] .sidenav-subitem.selected i.material-icons {
+  color: var(--mm-primary-color, #26a69a);
+}
 
 .sidenav {
   transition: transform 0.3s ease, width 0.3s ease;
@@ -3117,7 +3148,7 @@ body {
   --mm-button-flat-text: var(--mm-primary-color);
   --mm-nav-background: #1e1e1e;
   --mm-nav-text: #ffffff;
-  --mm-nav-active-text: #000000;
+  --mm-nav-active-text: #ffffff;
   --mm-modal-background: #2d2d2d;
   --mm-overlay-background: rgba(0, 0, 0, 0.8);
   --mm-shadow-color: rgba(0, 0, 0, 0.5);

package/dist/index.css

@@ -79,7 +79,7 @@ body {
   --mm-button-flat-text: var(--mm-primary-color);
   --mm-nav-background: #1e1e1e;
   --mm-nav-text: #ffffff;
-  --mm-nav-active-text: #000000;
+  --mm-nav-active-text: #ffffff;
   --mm-modal-background: #2d2d2d;
   --mm-overlay-background: rgba(0, 0, 0, 0.8);
   --mm-shadow-color: rgba(0, 0, 0, 0.5);
@@ -4370,6 +4370,23 @@ nav .input-field label.active i {
     height: 64px;
   }
 }
+[data-theme=dark] nav ul li.active {
+  background-color: rgba(38, 166, 154, 0.2);
+}
+[data-theme=dark] nav ul li.active a {
+  color: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
+}
+[data-theme=dark] nav ul li.active i, [data-theme=dark] nav ul li.active .material-icons {
+  color: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
+}
+
+nav ul li {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
 a {
   text-decoration: none;
 }
@@ -7759,13 +7776,17 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   background-color: var(--mm-border-color, rgba(0, 0, 0, 0.05));
 }
 .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
-  color: var(--mm-nav-active-text, #fff);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
   display: block;
   font-size: 14px;
   font-weight: 500;
   height: 48px;
   line-height: 48px;
   padding: 0 32px;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
 }
 .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > [class^=mdi-], .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) li > a > [class*=mdi-], .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
   float: left;
@@ -7778,6 +7799,13 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
      -moz-user-select: none;
           user-select: none;
 }
+.sidenav 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);
+}
+.sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
+  color: var(--mm-nav-active-text, #fff);
+}
 .sidenav li > .btn, .sidenav li > .btn-large, .sidenav li > .btn-flat, .sidenav li > .btn-floating {
   margin: 10px 32px;
 }
@@ -7969,13 +7997,23 @@ 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;
 }
 .sidenav-subitem:hover {
   background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
 }
+.sidenav-subitem.selected {
+  background-color: var(--mm-primary-color-light, rgba(38, 166, 154, 0.15));
+}
 .sidenav-subitem.selected svg {
   fill: var(--mm-primary-color, #26a69a);
 }
+.sidenav-subitem.selected i.material-icons {
+  color: var(--mm-primary-color, #26a69a);
+}
 .sidenav-subitem svg {
   fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
   transition: fill 0.2s ease;
@@ -8008,20 +8046,20 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
 }
 [data-theme=dark] .sidenav li.active {
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: var(--mm-primary-color, #26a69a);
 }
 [data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
-  color: var(--mm-nav-active-text, #fff);
+  color: #000;
 }
 [data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, [data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
-  color: var(--mm-nav-active-text, #fff);
+  color: #000;
 }
 [data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a {
-  color: var(--mm-nav-active-text, #fff);
+  color: #000;
 }
 [data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a i,
 [data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a i.material-icons {
-  color: var(--mm-nav-active-text, #fff);
+  color: #000;
 }
 [data-theme=dark] .sidenav .subheader {
   color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
@@ -8038,6 +8076,16 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
 [data-theme=dark] .sidenav-subitem i.material-icons {
   color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
 }
+[data-theme=dark] .sidenav-subitem.selected {
+  background-color: rgba(38, 166, 154, 0.2);
+  color: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
+}
+[data-theme=dark] .sidenav-subitem.selected svg {
+  fill: var(--mm-primary-color, #26a69a);
+}
+[data-theme=dark] .sidenav-subitem.selected i.material-icons {
+  color: var(--mm-primary-color, #26a69a);
+}
 
 .sidenav {
   transition: transform 0.3s ease, width 0.3s ease;

package/dist/index.esm.js

@@ -7810,6 +7810,66 @@ const FileUpload = () => {
     };
 };
 
+// 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
@@ -7932,6 +7992,8 @@ const Sidenav = () => {
                             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', {
@@ -7960,6 +8022,8 @@ const Sidenav = () => {
                             return child;
                         })
                         : children,
+                    // Footer item (if provided, appears at the bottom)
+                    attrs.footer && renderSidenavItem(attrs.footer, isExpanded, position),
                 ]),
             ];
         },
@@ -7978,43 +8042,42 @@ const NavbarSubItem = () => {
                 }
             };
             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);
@@ -8046,8 +8109,8 @@ const SidenavItem = () => {
                 .filter(Boolean)
                 .join(' ') || undefined;
             const handleMainClick = (e) => {
-                e.preventDefault();
                 if (hasSubmenu) {
+                    e.preventDefault();
                     isSubmenuOpen = active ? !isSubmenuOpen : true;
                 }
                 if (onclick && !disabled) {
@@ -8064,11 +8127,11 @@ const SidenavItem = () => {
                 ? [
                     // 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 = {