mithril-materialized 3.4.4 → 3.5.0

package/dist/index.umd.js

@@ -268,6 +268,7 @@
                 state.isOpen = false;
                 state.selectedIndex = -1;
             }
+            m.redraw();
         };
         const getDropdownStyles = () => {
             if (!state.inputElement) {
@@ -966,6 +967,18 @@
             '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
@@ -974,6 +987,18 @@
             '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
@@ -7800,12 +7825,27 @@
                 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) {
@@ -7834,12 +7874,16 @@
                 }
             },
             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',
@@ -7850,49 +7894,206 @@
                     // 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/material-icon.d.ts

@@ -3,8 +3,14 @@ declare const iconPaths: {
     readonly caret: readonly ["M7 10l5 5 5-5z", "M0 0h24v24H0z"];
     readonly close: readonly ["M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z", "M0 0h24v24H0z"];
     readonly chevron: readonly ["M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z", "M0 0h24v24H0z"];
+    readonly chevron_left: readonly ["M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z", "M0 0h24v24H0z"];
+    readonly chevron_right: readonly ["M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z", "M0 0h24v24H0z"];
+    readonly menu: readonly ["M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z", "M0 0h24v24H0z"];
     readonly expand: readonly ["M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", "M0 0h24v24H0z"];
     readonly collapse: readonly ["M19 13H5v-2h14v2z", "M0 0h24v24H0z"];
+    readonly check: readonly ["M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z", "M0 0h24v24H0z"];
+    readonly radio_checked: readonly ["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", "M0 0h24v24H0z"];
+    readonly radio_unchecked: readonly ["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", "M0 0h24v24H0z"];
     readonly light_mode: readonly ["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"];
     readonly dark_mode: readonly ["M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-4.4 2.26 5.4 5.4 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z", "M0 0h24v24H0z"];
 };

package/dist/sidenav.d.ts

@@ -1,4 +1,16 @@
 import { FactoryComponent, Attributes } from 'mithril';
+export interface NavbarSubItemAttrs {
+    /** Text content of the submenu item */
+    text: string;
+    /** Optional icon name */
+    icon?: string;
+    /** Whether this submenu item is selected */
+    selected?: boolean;
+    /** Value for the submenu item */
+    value?: any;
+    /** Selection callback */
+    onSelect?: (value: any, selected: boolean) => void;
+}
 export interface SidenavAttrs extends Attributes {
     /** Unique ID for the sidenav */
     id?: string;
@@ -10,7 +22,7 @@ export interface SidenavAttrs extends Attributes {
     position?: 'left' | 'right';
     /** Whether sidenav should overlay content or push it */
     mode?: 'overlay' | 'push';
-    /** Width of the sidenav in pixels */
+    /** Width of the sidenav in pixels (when expanded) */
     width?: number;
     /** Custom class for the sidenav */
     className?: string;
@@ -26,6 +38,14 @@ export interface SidenavAttrs extends Attributes {
     fixed?: boolean;
     /** Breakpoint for responsive behavior (in pixels) */
     breakpoint?: number;
+    /** Show hamburger toggle button */
+    showHamburger?: boolean;
+    /** Enable collapse/expand functionality */
+    expandable?: boolean;
+    /** Whether the sidenav is expanded (shows icons + text) */
+    isExpanded?: boolean;
+    /** Callback when expand state changes */
+    onExpandChange?: (expanded: boolean) => void;
 }
 export interface SidenavItemAttrs {
     /** Text content of the item */
@@ -46,6 +66,14 @@ export interface SidenavItemAttrs {
     divider?: boolean;
     /** Whether this is a subheader */
     subheader?: boolean;
+    /** Submenu items */
+    submenu?: NavbarSubItemAttrs[];
+    /** Submenu selection mode */
+    submenuMode?: 'checkbox' | 'radio';
+    /** @internal - Whether the sidenav is expanded (passed from parent) */
+    _isExpanded?: boolean;
+    /** @internal - Position of the sidenav (passed from parent) */
+    _position?: 'left' | 'right';
 }
 /**
  * Sidenav Component

package/package.json

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

package/sass/components/_sidenav.scss

@@ -109,7 +109,9 @@
 }
 
 // Legacy Sidenav Styles (maintain backward compatibility)
-
+ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) i.material-icons {
+  margin: 0;
+}
 .sidenav {
   position: fixed;
   width: variables.$sidenav-width;
@@ -191,7 +193,8 @@
   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-text-primary, variables.$sidenav-font-color);
+    color: var(--mm-nav-active-text, #fff);
     display: block;
     font-size: variables.$sidenav-font-size;
     font-weight: 500;
@@ -208,6 +211,7 @@
       margin: 0 (variables.$sidenav-padding * 2) 0 0;
       width: math.div(variables.$sidenav-item-height, 2);
       color: var(--mm-text-secondary, rgba(0,0,0,.54));
+      user-select: none;
     }
   }
 
@@ -341,7 +345,7 @@
 .sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active {
   background-color: variables.$primary-color;
   a {
-    color: variables.$sidenav-bg-color;
+    color: var(--mm-nav-active-text, #fff);
   }
 }
 .sidenav .collapsible-body {
@@ -368,3 +372,190 @@
 .sidenav-overlay {
   pointer-events: auto;
 }
+
+// Hamburger button styles (legacy - external button)
+.sidenav-hamburger {
+  background: var(--mm-surface-color, #fff);
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+
+  &:hover {
+    background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+
+  svg {
+    fill: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  }
+}
+
+// Hamburger item inside sidenav
+.sidenav-hamburger-item {
+  list-style: none;
+
+  &:hover {
+    background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+  }
+
+  svg {
+    fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  }
+}
+
+// Collapsed sidenav state
+.sidenav.sidenav-collapsed {
+  width: 60px !important;
+
+  .sidenav-item-text {
+    display: none;
+  }
+
+  li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
+    padding: 0 18px;
+    justify-content: center;
+
+    & > i,
+    & > i.material-icons {
+      margin: 0;
+      float: none;
+    }
+  }
+
+  .subheader {
+    display: none;
+  }
+
+  .sidenav-subitem {
+    padding: 8px 16px !important;
+    justify-content: center;
+
+    span {
+      display: none;
+    }
+  }
+}
+
+// Expand/collapse toggle button
+.sidenav-expand-toggle {
+  &:hover {
+    background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+  }
+
+  svg {
+    fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+    transition: transform 0.2s ease;
+  }
+}
+
+// Submenu item styles
+.sidenav-subitem {
+  list-style: none;
+  transition: background-color 0.2s ease;
+
+  &: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 {
+    svg {
+      fill: var(--mm-primary-color, #26a69a);
+    }
+  }
+
+  svg {
+    fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+    transition: fill 0.2s ease;
+  }
+
+  i.material-icons {
+    color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  }
+}
+
+// Menu item with submenu indicator
+.sidenav li.has-submenu {
+  &.active > a {
+    background: var(--mm-primary-color-light, rgba(38, 166, 154, 0.1));
+    color: var(--mm-primary-color, #26a69a);
+  }
+}
+
+// Dark theme support
+[data-theme="dark"] {
+  .sidenav-hamburger {
+    background: var(--mm-surface-color, #1e1e1e);
+
+    svg {
+      fill: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
+    }
+  }
+
+  .sidenav {
+    background-color: var(--mm-surface-color, #1e1e1e);
+
+    li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
+      color: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
+
+      &:hover {
+        background-color: var(--mm-border-color, rgba(255, 255, 255, 0.05));
+      }
+
+      & > i,
+      & > i.material-icons {
+        color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
+      }
+    }
+
+    li.active {
+      background-color: rgba(255, 255, 255, 0.05);
+
+      & > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
+        color: var(--mm-nav-active-text, #fff);
+
+        & > i,
+        & > i.material-icons {
+          color: var(--mm-nav-active-text, #fff);
+        }
+      }
+    }
+
+    .collapsible-body > ul:not(.collapsible) > li.active a {
+      color: var(--mm-nav-active-text, #fff);
+
+      i,
+      i.material-icons {
+        color: var(--mm-nav-active-text, #fff);
+      }
+    }
+
+    .subheader {
+      color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
+    }
+  }
+
+  .sidenav-expand-toggle svg {
+    fill: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
+  }
+
+  .sidenav-subitem {
+    &:hover {
+      background: var(--mm-border-color, rgba(255, 255, 255, 0.05));
+    }
+
+    svg {
+      fill: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
+    }
+
+    i.material-icons {
+      color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
+    }
+  }
+}
+
+// Animation for smooth width transitions
+.sidenav {
+  transition: transform 0.3s ease, width 0.3s ease;
+}