@vertisanpro/flowbite-react/lib/src/components/Sidebar/SidebarCollapse.js

Non-Official React components built for Flowbite and Tailwind CSS

'use client';
import { HiChevronDown } from '@vertisanpro/react-icons/hi';
import { twMerge } from '@vertisanpro/tailwind-merge';
import { nanoid } from 'nanoid';
import React, { useEffect, useMemo, useState } from 'react';
import { mergeDeep } from '../../helpers/merge-deep';
import { Tooltip } from '../Tooltip';
import { useSidebarContext } from './SidebarContext';
import { SidebarItemContext } from './SidebarItemContext';
export const SidebarCollapse = ({ children, className, icon: Icon, label, chevronIcon: ChevronIcon = HiChevronDown, renderChevronIcon, open = false, theme: customTheme = {}, ...props }) => {
    const id = useMemo(() => nanoid(), []);
    const [isOpen, setOpen] = useState(open);
    const { theme: rootTheme, isCollapsed } = useSidebarContext();
    const theme = mergeDeep(rootTheme.collapse, customTheme);
    useEffect(() => setOpen(open), [open]);
    const Wrapper = ({ children }) => (React.createElement("li", null, isCollapsed && !isOpen ? (React.createElement(Tooltip, { content: label, placement: "right" }, children)) : (children)));
    return (React.createElement(Wrapper, null,
        React.createElement("button", { id: `flowbite-sidebar-collapse-${id}`, onClick: () => setOpen(!isOpen), title: label, type: "button", className: twMerge(theme.button, className), ...props },
            Icon && (React.createElement(Icon, { "aria-hidden": true, "data-testid": "flowbite-sidebar-collapse-icon", className: twMerge(theme.icon.base, theme.icon.open[isOpen ? 'on' : 'off']) })),
            isCollapsed ? (React.createElement("span", { className: "sr-only" }, label)) : (React.createElement(React.Fragment, null,
                React.createElement("span", { "data-testid": "flowbite-sidebar-collapse-label", className: theme.label.base }, label),
                renderChevronIcon ? (renderChevronIcon(theme, isOpen)) : (React.createElement(ChevronIcon, { "aria-hidden": true, className: twMerge(theme.label.icon.base, theme.label.icon.open[isOpen ? 'on' : 'off']) }))))),
        React.createElement("ul", { "aria-labelledby": `flowbite-sidebar-collapse-${id}`, hidden: !isOpen, className: theme.list },
            React.createElement(SidebarItemContext.Provider, { value: { isInsideCollapse: true } }, children))));
};
SidebarCollapse.displayName = 'Sidebar.Collapse';