export default function MobileMenu()

in src/app-nav-bar/mobile-menu.tsx [69:210]
130 lines of code
10 McCabe index (conditional complexity)

export default function MobileMenu(props: AppNavBarProps) {
  const { mainItems = [], userItems = [], mapItemToNode, overrides = {}, ...rest } = props;

  const items = [
    ...(userItems.length
      ? [
          {
            item: { ...rest },
            label: props.username,
            [USER_TITLE_ITEM]: true,
            children: userItems.map((item) => {
              return {
                ...item,
                [USER_MENU_ITEM]: true,
              };
            }),
          },
        ]
      : []),
    ...mainItems,
  ];

  const [isOpen, setIsOpen] = React.useState(false);
  const [currentNavItems, setCurrentNavItems] = React.useState(items);
  const [ancestorNavItems, setAncestorNavItems] = React.useState([]);

  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };

  const [SideMenuButton, sideMenuButtonProps] = getOverrides(overrides.SideMenuButton, Button);
  sideMenuButtonProps.overrides = mergeOverrides(
    { BaseButton: { component: StyledSideMenuButton } },
    sideMenuButtonProps.overrides
  );

  const [MobileDrawer, drawerProps] = getOverrides(overrides.MobileDrawer, Drawer);
  drawerProps.overrides = mergeOverrides(
    {
      DrawerBody: {
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        style: ({ $theme }) => {
          return {
            marginTop: '0px',
            marginBottom: '0px',
            marginLeft: '0px',
            marginRight: '0px',
          };
        },
      },
      // Removes the close icon from the drawer
      Close: () => null,
    },
    drawerProps.overrides
  );

  const [MobileMenu, menuProps] = getOverrides(overrides.MobileMenu, StatefulMenu);
  menuProps.overrides = mergeOverrides(
    {
      List: {
        style: {
          paddingTop: '0',
          paddingBottom: '0',
          minHeight: '100vh',
          boxShadow: 'none',
        },
      },
      // eslint-disable-next-line react/display-name
      ListItem: React.forwardRef((listItemProps, ref) => {
        return (
          <MobileNavMenuItem
            ref={ref}
            {...listItemProps}
            mapItemToNode={mapItemToNode}
            overrides={overrides}
          />
        );
      }),
    },
    menuProps.overrides
  );

  return (
    <>
      <SideMenuButton onClick={toggleMenu} {...sideMenuButtonProps}>
        <MenuIcon size={'24px'} />
      </SideMenuButton>
      <MobileDrawer
        anchor={ANCHOR.left}
        isOpen={isOpen}
        onClose={toggleMenu}
        size={'75%'}
        {...drawerProps}
      >
        <MobileMenu
          items={currentNavItems}
          // @ts-ignore
          onItemSelect={({ item }) => {
            if (item.PARENT_MENU_ITEM) {
              // Remove current parent item selected to return to
              // from the ancestors list (`ancestorNavItems[ancestorArrLength - 1]`)
              const updatedAncestorNavItems = ancestorNavItems.slice(
                0,
                ancestorNavItems.length - 1
              );
              const isTopLevel = !updatedAncestorNavItems.length;
              if (isTopLevel) {
                // Set to the initial `navItems` value
                setCurrentNavItems(items);
              } else {
                const newParentItem = {
                  // @ts-ignore
                  ...updatedAncestorNavItems[updatedAncestorNavItems.length - 1],
                  [PARENT_MENU_ITEM]: true,
                };
                setCurrentNavItems([newParentItem, ...newParentItem.children]);
              }
              setAncestorNavItems(updatedAncestorNavItems);
              return;
            }

            if (item.USER_MENU_ITEM && props.onUserItemSelect) {
              props.onUserItemSelect(item);
            } else if (!item.USER_TITLE_ITEM && props.onMainItemSelect) {
              props.onMainItemSelect(item);
            }

            if (item.children && item.children.length) {
              const parentItem = { ...item, [PARENT_MENU_ITEM]: true };
              // @ts-ignore
              setAncestorNavItems([...ancestorNavItems, item]);
              setCurrentNavItems([parentItem, ...item.children]);
              return;
            }
            toggleMenu();
          }}
          {...menuProps}
        />
      </MobileDrawer>
    </>
  );
}