function DropdownNavbarItemMobile()

in src/theme/NavbarItem/DropdownNavbarItem/index.tsx [88:143]
52 lines of code
2 McCabe index (conditional complexity)

function DropdownNavbarItemMobile({
    items,
    className,
    position, // Need to destructure position from props so that it doesn't get passed on.
    onClick,
    ...props
}: DesktopOrMobileNavBarItemProps) {
    const localPathname = useLocalPathname();
    const containsActive = containsActiveItems(items, localPathname);

    const { collapsed, toggleCollapsed, setCollapsed } = useCollapsible({
        initialState: () => !containsActive,
    });

    // Expand/collapse if any item active after a navigation
    useEffect(() => {
        if (containsActive) {
            setCollapsed(!containsActive);
        }
    }, [localPathname, containsActive, setCollapsed]);

    return (
        <li
            className={clsx('menu__list-item', {
                'menu__list-item--collapsed': collapsed,
            })}
        >
            <NavbarNavLink
                role="button"
                className={clsx(
                    'menu__link menu__link--sublist menu__link--sublist-caret',
                    className,
                )}
                {...props}
                onClick={e => {
                    e.preventDefault();
                    toggleCollapsed();
                }}
            >
                {props.children ?? props.label}
            </NavbarNavLink>
            <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
                {items.map((childItemProps, i) => (
                    <NavbarItem
                        mobile
                        isDropdownItem
                        onClick={onClick}
                        activeClassName="menu__link--active"
                        {...childItemProps}
                        key={i}
                    />
                ))}
            </Collapsible>
        </li>
    );
}