Function NavPart

pwa/components/docs/DocMenu.tsx:19–134

({ title, link, links, basePath, autoOpen }: NavPartProps)

const trimLink = (str: string) => str.replace(/\/$/, "");

function NavPart({ title, link, links, basePath, autoOpen }: NavPartProps) {
  const pathname = usePathname();
  const [isOpen, setOpen] = useState(
    autoOpen && (pathname === link || pathname.startsWith(basePath))
  );

  useEffect(() => {
    if (!autoOpen) return;
    if (pathname === link || pathname.startsWith(basePath)) setOpen(true);
    else setOpen(false);
  }, [pathname, autoOpen, basePath, link]);

  return (
    <div
      className={classNames(
        "doc-nav transition-all duration-300",
        isOpen && links?.length ? "mb-8" : "mb-4"
      )}
    >
      <div
        className={classNames(
          "flex flex-row items-center text-left",
          pathname === link ||
            (pathname.startsWith(basePath) && basePath !== "")
            ? "text-blue"
            : "text-gray-700 dark:text-white"
        )}
      >
        {link ? (
          <Link
            href={link}
            prefetch={false}
            className={classNames(
              "flex-1 font-semibold uppercase doc-category",
              pathname === link ||
                (pathname.startsWith(basePath) &&
                  basePath !== "" &&
                  "is-active") // for docsearch
            )}
          >
            {title}
          </Link>
        ) : (
          <p
            role="button"
            onClick={() => setOpen(!isOpen)}
            className={classNames(
              "flex-1 font-semibold uppercase doc-category",
              pathname === link ||
                (pathname.startsWith(basePath) &&
                  basePath !== "" &&
                  "is-active") // for docsearch
            )}
          >
            {title}
          </p>
        )}
        <button