mithril-materialized 3.5.3 → 3.5.5

package/dist/advanced.css

@@ -866,6 +866,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;
 }
 .sidenav.sidenav-left {
   left: 0;
@@ -911,13 +913,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 +934,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 +1132,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 +1181,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 +1211,20 @@ 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-footer-item {
+  margin-top: auto;
+}
 
 .sidenav {
   transition: transform 0.3s ease, width 0.3s ease;
@@ -1375,6 +1412,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

@@ -1619,6 +1619,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;
 }
 .sidenav.sidenav-left {
   left: 0;
@@ -1664,13 +1666,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 +1687,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 +1885,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 +1934,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 +1964,20 @@ 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-footer-item {
+  margin-top: auto;
+}
 
 .sidenav {
   transition: transform 0.3s ease, width 0.3s ease;
@@ -3117,7 +3154,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;
 }
@@ -7714,6 +7731,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;
 }
 .sidenav.sidenav-left {
   left: 0;
@@ -7759,13 +7778,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 +7801,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 +7999,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 +8048,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 +8078,20 @@ 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-footer-item {
+  margin-top: auto;
+}
 
 .sidenav {
   transition: transform 0.3s ease, width 0.3s ease;

package/dist/index.esm.js

@@ -7810,6 +7810,87 @@ 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;
+};
+/**
+ * Sidenav Header/Footer Item Component
+ */
+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
  * A responsive navigation drawer that slides in from the side
@@ -7932,6 +8013,9 @@ const Sidenav = () => {
                             name: 'menu',
                             style: { width: '24px', height: '24px' },
                         })),
+                    // Header item (if provided, appears before expand/collapse toggle)
+                    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', {
@@ -7946,8 +8030,12 @@ const Sidenav = () => {
                             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
@@ -7960,6 +8048,9 @@ const Sidenav = () => {
                             return child;
                         })
                         : children,
+                    // Footer item (if provided, appears at the bottom)
+                    attrs.footer &&
+                        m(SidenavHeaderFooterItem, Object.assign(Object.assign({}, attrs.footer), { _isExpanded: isExpanded, _position: position, className: 'sidenav-footer-item' })),
                 ]),
             ];
         },
@@ -7978,43 +8069,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',
-                        },
-                    }),
+                    isExpanded && m('span', { style: { flex: '1', 'text-align': 'left' } }, text),
+                    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);
@@ -8037,20 +8127,16 @@ const SidenavItem = () => {
                 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) => {
-                e.preventDefault();
                 if (hasSubmenu) {
+                    e.preventDefault();
                     isSubmenuOpen = active ? !isSubmenuOpen : true;
                 }
                 if (onclick && !disabled) {
+                    e.preventDefault();
                     onclick(e);
                 }
             };
@@ -8063,13 +8149,14 @@ const SidenavItem = () => {
             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 || ''),
+                    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
-                    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),
+                    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',