export function SidebarRouteTree()

in beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx [73:156]
78 lines of code
12 McCabe index (conditional complexity)

export function SidebarRouteTree({
  isMobile,
  routeTree,
  level = 0,
}: SidebarRouteTreeProps) {
  const {breadcrumbs} = useRouteMeta(routeTree);
  const {pathname} = useRouter();
  const slug = pathname;

  const currentRoutes = routeTree.routes as RouteItem[];
  const expandedPath = currentRoutes.reduce(
    (acc: string | undefined, curr: RouteItem) => {
      if (acc) return acc;
      const breadcrumb = breadcrumbs.find((b) => b.path === curr.path);
      if (breadcrumb) {
        return curr.path;
      }
      if (curr.path === pathname) {
        return pathname;
      }
      return undefined;
    },
    undefined
  );

  const expanded = expandedPath;
  return (
    <ul>
      {currentRoutes.map(({path, title, routes, heading}) => {
        const pagePath = path && removeFromLast(path, '.');
        const selected = slug === pagePath;

        // if current route item has no path and children treat it as an API sidebar heading
        if (!path || !pagePath || heading) {
          return (
            <SidebarRouteTree
              level={level + 1}
              isMobile={isMobile}
              routeTree={{title, routes}}
            />
          );
        }

        // if route has a path and child routes, treat it as an expandable sidebar item
        if (routes) {
          const isExpanded = isMobile || expanded === path;
          return (
            <li key={`${title}-${path}-${level}-heading`}>
              <SidebarLink
                key={`${title}-${path}-${level}-link`}
                href={pagePath}
                selected={selected}
                level={level}
                title={title}
                isExpanded={isExpanded}
                isBreadcrumb={expandedPath === path}
                hideArrow={isMobile}
              />
              <CollapseWrapper duration={250} isExpanded={isExpanded}>
                <SidebarRouteTree
                  isMobile={isMobile}
                  routeTree={{title, routes}}
                  level={level + 1}
                />
              </CollapseWrapper>
            </li>
          );
        }

        // if route has a path and no child routes, treat it as a sidebar link
        return (
          <li key={`${title}-${path}-${level}-link`}>
            <SidebarLink
              href={pagePath}
              selected={selected}
              level={level}
              title={title}
            />
          </li>
        );
      })}
    </ul>
  );
}