seti-ramesesv1/dist/components/common/Sidebar.js

Reusable components and context for Next.js apps

import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import styles from '../../styles/Sidebar.module.css.js';
import PanelRightOpen from '../../node_modules/lucide-react/dist/esm/icons/panel-right-open.js';
import ChevronRight from '../../node_modules/lucide-react/dist/esm/icons/chevron-right.js';

function Sidebar({ onClick, items, activeItem, showToggle, openSidebar, onToggle, loading = false, defaultOpenFirstDropdown = false }) {
    const [openCategories, setOpenCategories] = useState([]);
    const sidebarClass = `${styles.sidebar} ${openSidebar ? styles.sidebarOpen : styles.sidebarClosed}`;
    // ✅ Automatically open the first dropdown on mount if requested
    useEffect(() => {
        if (defaultOpenFirstDropdown) {
            const firstDropdownIndex = items.findIndex((item) => item.isDropdown);
            if (firstDropdownIndex !== -1) {
                setOpenCategories([firstDropdownIndex]);
            }
        }
    }, [defaultOpenFirstDropdown, items]);
    const allSubItems = items.flatMap((group) => group.items || []);
    const matchKey = allSubItems.find((item) => Object.entries(item).some(([key, value]) => value === activeItem))?.type
        ? "type"
        : allSubItems.find((item) => Object.entries(item).some(([key, value]) => value === activeItem))?.page
            ? "page"
            : undefined;
    const handleCategoryToggle = (index) => {
        setOpenCategories((prev) => (prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]));
    };
    const skeletonCount = 5;
    return (jsx("div", { className: sidebarClass, children: jsxs("div", { className: styles.sidebarContent, children: [!showToggle && (jsx("div", { className: styles.sidebarButton, children: openSidebar && jsx(PanelRightOpen, { color: "#6b7280", onClick: () => onToggle?.(!openSidebar), className: "cursor-pointer", size: 20 }) })), loading
                    ? Array.from({ length: skeletonCount }).map((_, idx) => (jsx("div", { className: styles.sidebarItemWrapper, children: jsx("div", { className: `${styles.sidebarItem} ${openSidebar ? styles.sidebarItemOpen : styles.sidebarItemCollapsed}`, children: jsx("div", { className: styles.skeleton, style: { width: openSidebar ? "70%" : "40%" } }) }) }, idx)))
                    : items.map((item, index) => (jsxs("div", { className: styles.sidebarSection, children: [!item.items && (jsx("div", { className: `${styles.subSingleItem} ${item.page === activeItem ? styles.subItemActive : ""}`, onClick: () => onClick(item), children: jsx("p", { className: styles.subItemText, title: item.title, children: item.title }) })), item.items && (jsxs(Fragment, { children: [jsxs("div", { className: `${styles.sidebarCategory} flex items-center gap-2`, style: { cursor: item.isDropdown ? "pointer" : "default" }, onClick: () => item.isDropdown && handleCategoryToggle(index), children: [item.isDropdown && (jsx(ChevronRight, { className: `${styles.chevron} ${openCategories.includes(index) ? styles.chevronOpen : ""}`, size: 15 })), jsx("p", { children: item.title })] }), jsx("div", { className: `${styles.dropdown} ${item.isDropdown ? (openCategories.includes(index) ? styles.dropdownOpen : "") : styles.dropdownOpen}`, children: item.items.map((subItem, subIndex) => {
                                            const isActive = subItem.page === activeItem || (matchKey && subItem[matchKey] === activeItem);
                                            return (jsx("div", { className: `${styles.subItem} ${isActive ? styles.subItemActive : ""}`, onClick: () => onClick(subItem), children: jsx("p", { className: styles.subItemText, title: subItem.title, children: subItem.title }) }, subIndex));
                                        }) })] }))] }, index)))] }) }));
}

export { Sidebar as default };
//# sourceMappingURL=Sidebar.js.map