mithril-materialized/dist/sidenav.d.ts

A materialize library for mithril.

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 - material icon name, SVG object, or image object */
    icon?: IconDefinition;
    /** 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;
    /** Whether the sidenav is open */
    isOpen?: boolean;
    /** Callback when sidenav open state changes */
    onToggle?: (isOpen: boolean) => void;
    /** Position of the sidenav */
    position?: 'left' | 'right';
    /** Whether sidenav should overlay content or push it */
    mode?: 'overlay' | 'push';
    /** Width of the sidenav in pixels (when expanded) */
    width?: number;
    /** Custom class for the sidenav */
    className?: string;
    /** Whether to show backdrop overlay */
    showBackdrop?: boolean;
    /** Close sidenav when backdrop is clicked */
    closeOnBackdropClick?: boolean;
    /** Close sidenav when escape key is pressed */
    closeOnEscape?: boolean;
    /** Animation duration in milliseconds */
    animationDuration?: number;
    /** Fixed sidenav (always visible on larger screens) */
    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;
    /** 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 - material icon name, SVG object, or image object */
    icon?: IconDefinition;
    /** Whether this item is active */
    active?: boolean;
    /** Whether this item is disabled */
    disabled?: boolean;
    /** Click handler */
    onclick?: (e: Event) => void;
    /** Href for link items */
    href?: string;
    /** Custom class */
    className?: string;
    /** Whether this is a divider */
    divider?: boolean;
    /** Whether this is a subheader */
    subheader?: boolean;
    /** Submenu items */
    submenu?: NavbarSubItemAttrs[];
    /** 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) */
    _position?: 'left' | 'right';
}
/**
 * Sidenav Component
 * A responsive navigation drawer that slides in from the side
 */
export declare const Sidenav: FactoryComponent<SidenavAttrs>;
/**
 * Sidenav Item Component
 * Individual items for the sidenav menu
 */
export declare const SidenavItem: FactoryComponent<SidenavItemAttrs>;
/**
 * Sidenav utilities for programmatic control
 */
export declare class SidenavManager {
    /**
     * Open a sidenav by ID
     */
    static open(id: string): void;
    /**
     * Close a sidenav by ID
     */
    static close(id: string): void;
    /**
     * Toggle a sidenav by ID
     */
    static toggle(id: string): void;
}