export default function SidebarMenu()

in apps/chat/src/components/Common/SidebarMenu.tsx [59:156]
92 lines of code
12 McCabe index (conditional complexity)

export default function SidebarMenu({
  menuItems,
  featureType,
  displayMenuItemCount = 5,
  isOpen,
  onOpenChange,
}: MenuProps) {
  const [displayItemsCount, setDisplayItemsCount] =
    useState<number>(displayMenuItemCount);
  const containerRef = useRef<HTMLDivElement>(null);
  const displayedItems = useMemo(
    () => menuItems.filter(({ display = true }) => display),
    [menuItems],
  );
  const [visibleItems, hiddenItems] = useMemo(() => {
    const visibleItems = displayedItems.slice(0, displayItemsCount);
    const hiddenItems = displayedItems.slice(displayItemsCount);
    return [visibleItems, hiddenItems];
  }, [displayedItems, displayItemsCount]);

  useEffect(() => {
    const resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        if (entry.contentBoxSize) {
          const itemsContainerWidth = entry.contentBoxSize[0].inlineSize;
          let count = 3;
          while (
            itemsContainerWidth >=
            ITEM_WIDTH * (count + 1) - ITEMS_GAP_IN_PIXELS
          ) {
            count++;
          }

          let enoughPlaceForEllipsis = false;
          if (
            displayedItems.length > count + 1 ||
            itemsContainerWidth >= ITEM_WIDTH * count + 20
          ) {
            count++;
            enoughPlaceForEllipsis = true;
          }
          if (
            displayedItems.length > count ||
            (enoughPlaceForEllipsis && displayedItems.length >= count)
          ) {
            count--;
          }
          setDisplayItemsCount(count);
        }
      }
    });
    const containerElement = containerRef.current;
    containerElement && resizeObserver.observe(containerElement);

    return () => {
      containerElement && resizeObserver.observe(containerElement);
    };
  }, [displayedItems.length]);

  return (
    <div
      ref={containerRef}
      className="flex items-start gap-2 p-2 text-secondary"
      data-qa="bottom-panel"
    >
      {visibleItems.map(({ CustomTriggerRenderer, ...props }) => {
        const Trigger = CustomTriggerRenderer ? (
          <CustomTriggerRenderer
            {...props}
            featureType={featureType}
            Renderer={SidebarMenuItemRenderer}
          />
        ) : (
          <SidebarMenuItemRenderer {...props} featureType={featureType} />
        );

        return (
          <Tooltip
            key={props.name}
            isTriggerClickable
            tooltip={props.name}
            contentClassName={props.className}
          >
            {Trigger}
          </Tooltip>
        );
      })}

      <ContextMenu
        triggerIconClassName="flex min-w-[34px] cursor-pointer items-center"
        menuItems={hiddenItems}
        isOpen={isOpen}
        featureType={featureType}
        onOpenChange={onOpenChange}
      />
    </div>
  );
}