"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
/**
* Sidebar / Menu Component
*
* A vertical navigation menu for switching between different views or sections
*/
const react_1 = require("react");
const Sidebar = ({ menuItems = [], collapsed = false, onToggleCollapse, onMenuItemClick, className = '', footer }) => {
    const [isCollapsed, setIsCollapsed] = (0, react_1.useState)(collapsed);
    const toggleCollapse = () => {
        const newCollapsedState = !isCollapsed;
        setIsCollapsed(newCollapsedState);
        if (onToggleCollapse) {
            onToggleCollapse(newCollapsedState);
        }
    };
    const handleMenuItemClick = (item) => {
        if (onMenuItemClick) {
            onMenuItemClick(item);
        }
    };
    return ((0, jsx_runtime_1.jsxs)("div", { className: `bf-sidebar${isCollapsed ? ' bf-sidebar-collapsed' : ''} ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "bf-sidebar-header", children: (0, jsx_runtime_1.jsx)("button", { className: "bf-sidebar-toggle", onClick: toggleCollapse, "aria-label": isCollapsed ? 'Expand sidebar' : 'Collapse sidebar', children: isCollapsed ? '→' : '←' }) }), (0, jsx_runtime_1.jsx)("nav", { className: "bf-sidebar-nav", children: (0, jsx_runtime_1.jsx)("ul", { className: "bf-menu", children: menuItems.map((item, index) => ((0, jsx_runtime_1.jsxs)("li", { className: `bf-menu-item${item.active ? ' bf-active' : ''}`, children: [(0, jsx_runtime_1.jsxs)("a", { href: item.url || '#', className: "bf-menu-link", onClick: e => {
                                    if (!item.url || onMenuItemClick) {
                                        e.preventDefault();
                                        handleMenuItemClick(item);
                                    }
                                }, children: [item.icon && ((0, jsx_runtime_1.jsx)("span", { className: "bf-menu-icon", children: item.icon })), !isCollapsed && ((0, jsx_runtime_1.jsx)("span", { className: "bf-menu-label", children: item.label }))] }), item.submenu && !isCollapsed && ((0, jsx_runtime_1.jsx)("ul", { className: "bf-submenu", children: item.submenu.map((subitem, subindex) => ((0, jsx_runtime_1.jsx)("li", { className: `bf-submenu-item${subitem.active ? ' bf-active' : ''}`, children: (0, jsx_runtime_1.jsxs)("a", { href: subitem.url || '#', className: "bf-submenu-link", onClick: e => {
                                            if (!subitem.url || onMenuItemClick) {
                                                e.preventDefault();
                                                handleMenuItemClick(subitem);
                                            }
                                        }, children: [subitem.icon && ((0, jsx_runtime_1.jsx)("span", { className: "bf-submenu-icon", children: subitem.icon })), (0, jsx_runtime_1.jsx)("span", { className: "bf-submenu-label", children: subitem.label })] }) }, subindex))) }))] }, index))) }) }), footer && !isCollapsed && ((0, jsx_runtime_1.jsx)("div", { className: "bf-sidebar-footer", children: footer }))] }));
};
exports.default = Sidebar;
//# sourceMappingURL=Sidebar.js.map