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

Non-Official React components built for Flowbite and Tailwind CSS

'use client';
import { twMerge } from '@vertisanpro/tailwind-merge';
import { nanoid } from 'nanoid';
import React, { forwardRef, useMemo } from 'react';
import { mergeDeep } from '../../helpers/merge-deep';
import { Badge } from '../Badge';
import { Tooltip } from '../Tooltip';
import { useSidebarContext } from './SidebarContext';
import { useSidebarItemContext } from './SidebarItemContext';
const ListItem = ({ id, theme, isCollapsed, tooltipChildren, children: wrapperChildren, ...props }) => (React.createElement("li", { ...props }, isCollapsed ? (React.createElement(Tooltip, { content: React.createElement(Children, { id: id, theme: theme }, tooltipChildren), placement: "right" }, wrapperChildren)) : (wrapperChildren)));
const Children = ({ id, theme, children }) => {
    return (React.createElement("span", { "data-testid": "flowbite-sidebar-item-content", id: `flowbite-sidebar-item-${id}`, className: twMerge(theme.content.base) }, children));
};
export const SidebarItem = forwardRef(({ active: isActive, as: Component = 'a', children, className, icon: Icon, label, labelColor = 'info', theme: customTheme = {}, ...props }, ref) => {
    const id = useMemo(() => nanoid(), []);
    const { theme: rootTheme, isCollapsed } = useSidebarContext();
    const { isInsideCollapse } = useSidebarItemContext();
    const theme = mergeDeep(rootTheme.item, customTheme);
    return (React.createElement(ListItem, { theme: theme, className: theme.listItem, id: id, isCollapsed: isCollapsed, tooltipChildren: children },
        React.createElement(Component, { "aria-labelledby": `flowbite-sidebar-item-${id}`, ref: ref, className: twMerge(theme.base, isActive && theme.active, !isCollapsed && isInsideCollapse && theme.collapsed?.insideCollapse, className), ...props },
            Icon && (React.createElement(Icon, { "aria-hidden": true, "data-testid": "flowbite-sidebar-item-icon", className: twMerge(theme.icon?.base, isActive && theme.icon?.active) })),
            isCollapsed && !Icon && (React.createElement("span", { className: theme.collapsed?.noIcon }, children.charAt(0).toLocaleUpperCase() ?? '?')),
            !isCollapsed && (React.createElement(Children, { id: id, theme: theme }, children)),
            !isCollapsed && label && (React.createElement(Badge, { color: labelColor, "data-testid": "flowbite-sidebar-label", hidden: isCollapsed, className: theme.label }, label)))));
});
SidebarItem.displayName = 'Sidebar.Item';