export default function DocSidebarItemCategory()

in src/theme/DocSidebarItem/Category/index.tsx [104:230]
122 lines of code
29 McCabe index (conditional complexity)

export default function DocSidebarItemCategory({
    item,
    onItemClick,
    activePath,
    level,
    index,
    length,
    ...props
}: DocSidebarItemCategoryProps): JSX.Element {
    const [isDocsPage] = useIsDocPage(false);
    const { items, label, collapsible, className, href } = item;
    const {
        docs: {
            sidebar: { autoCollapseCategories },
        },
    } = useThemeConfig();
    const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);

    const isActive = isActiveSidebarItem(item, activePath);
    const isCurrentPage = isSamePath(href, activePath);

    const { collapsed, setCollapsed } = useCollapsible({
        // Active categories are always initialized as expanded. The default
        // (`item.collapsed`) is only used for non-active categories.
        initialState: () => {
            if (!collapsible) {
                return false;
            }
            return isActive ? false : item.collapsed;
        },
    });

    const { expandedItem, setExpandedItem } = useDocSidebarItemsExpandedState();
    // Use this instead of `setCollapsed`, because it is also reactive
    const updateCollapsed = (toCollapsed: boolean = !collapsed) => {
        setExpandedItem(toCollapsed ? null : index);
        setCollapsed(toCollapsed);
    };
    useAutoExpandActiveCategory({ isActive, collapsed, updateCollapsed });
    useEffect(() => {
        if (collapsible && expandedItem != null && expandedItem !== index && autoCollapseCategories) {
            setCollapsed(true);
        }
    }, [collapsible, expandedItem, index, setCollapsed, autoCollapseCategories]);

    return (
        <li
            className={clsx(
                ThemeClassNames.docs.docSidebarItemCategory,
                ThemeClassNames.docs.docSidebarItemCategoryLevel(level),
                'menu__list-item',
                {
                    'menu__list-item--collapsed': collapsed,
                },
                className,
            )}
        >
            <div
                className={clsx('menu__list-item-collapsible', {
                    'menu__list-item-collapsible--active': isCurrentPage,
                })}
            >
                {level === 1 && isDocsPage ? (
                    <p className={clsx('title_level_1')}>{label}</p>
                ) : (
                    <>
                        <Link
                            className={clsx('menu__link', {
                                'menu__link--sublist': collapsible,
                                'menu__link--sublist-caret': !href && collapsible,
                                'menu__link--active': isActive,
                            })}
                            onClick={
                                collapsible
                                    ? e => {
                                          onItemClick?.(item);
                                          if (href) {
                                              updateCollapsed(false);
                                          } else {
                                              e.preventDefault();
                                              updateCollapsed();
                                          }
                                      }
                                    : () => {
                                          onItemClick?.(item);
                                      }
                            }
                            aria-current={isCurrentPage ? 'page' : undefined}
                            role={collapsible && !href ? 'button' : undefined}
                            aria-expanded={collapsible && !href ? !collapsed : undefined}
                            href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback}
                            {...props}
                        >
                            {label}
                        </Link>
                        {href && collapsible && (
                            <CollapseButton
                                collapsed={collapsed}
                                categoryLabel={label}
                                onClick={e => {
                                    e.preventDefault();
                                    updateCollapsed();
                                }}
                            />
                        )}
                    </>
                )}
            </div>

            <Collapsible
                lazy
                as="ul"
                className={`menu__list ${level === 1 ? 'menu__list_level_2' : ''} ${level === 1 && !isDocsPage ? 'community_level_2' : ''} `}
                collapsed={collapsed}
            >
                <DocSidebarItems
                    items={items}
                    tabIndex={collapsed ? -1 : 0}
                    onItemClick={onItemClick}
                    activePath={activePath}
                    level={level + 1}
                />
            </Collapsible>
            {level === 1 && index !== length - 1 && isDocsPage ? <div className="divider"></div> : null}
        </li>
    );
}