Function MobileSideBar

pwa/components/docs/MobileSidebar.tsx:11–136

({
  docMenuParts,
}: {
  docMenuParts: NavPartProps[];
})

import DocMenu, { NavPartProps } from "./DocMenu";

export default function MobileSideBar({
  docMenuParts,
}: {
  docMenuParts: NavPartProps[];
}) {
  const [isOpen, setOpen] = useState(false);
  const { breadCrumbs } = useContext(DocContext);
  const pathname = usePathname();

  const menu = useRef<HTMLDivElement>(null);

  useOnClickOutside(menu, () => setOpen(false));

  useEffect(() => {
    setOpen(false);
  }, [pathname]);

  useEffect(() => {
    if (isOpen) document.body.style.overflow = "hidden";
    else document.body.style.overflow = "auto";
  }, [isOpen]);

  return (
    <div
      className={classNames(
        "sticky max-w-8xl px-6 top-16 w-full h-12 bg-white dark:bg-blue-black flex flex-row items-center border-b-px border-gray-300 dark:border-blue-dark text-blue | md:hidden",
        isOpen ? "z-50" : "z-40"
      )}
    >
      <button onClick={() => setOpen(true)}>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth={1.5}
          className="w-6 h-6 stroke-current"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
          />
        </svg>
      </button>
      <div className="pl-4 flex flex-row gap-1 items-center justify-center leading-none text-sm font-light text-text-secondary dark:text-white/70">
        {breadCrumbs.map((docLink, index) => (
          <Fragment key={docLink.title}>
            {docLink.link ? (
              <Link
                className="transition-all hover:text-blue text-ellipsis whitespace-nowrap overflow-hidden"
                href={docLink.link}
                prefetch={false}
              >
                {docLink.title}
              </Link>
            ) : (
              <span
                className={`${