Function renderBlogAppbar

apps/web/components/BlogAppbar.tsx:126–251

()

  );

  const renderBlogAppbar = () =>
    isLegacyMode ? (
      <div
        className={`sticky top-0 z-50 flex w-full flex-col items-center justify-between gap-4 border-b bg-zinc-50 p-4 shadow-md transition-transform duration-300 md:gap-0 dark:bg-zinc-950 ${
          !visible && scrollingDown ? "-translate-y-full transform" : " "
        }`}
        style={{ transform: !visible && !scrollingDown ? "translateY(0)" : "" }}
      >
        <div className="mr-2 flex w-full flex-col items-center sm:gap-2 md:flex-row md:items-center md:justify-between">
          <div className="mb-2 text-3xl font-semibold text-zinc-950 md:mb-0 dark:text-zinc-100">
            <Link href={"/"}>DailyCode</Link>
          </div>

          <p className="ml-2 hidden flex-1 items-center justify-center font-medium md:flex">
            {track.title} ({problemIndex + 1} / {track.problems.length})
          </p>
          <div className="flex items-center space-x-2">
            <CustomPagination allProblems={track.problems} isAtHeader track={track} problemIndex={problemIndex} />
            <ModeToggle />
            <Link href={`/pdf/${track.id}/${track.problems[problemIndex]!.id}`} target="_blank">
              <Button variant="outline" className="ml-2 hidden bg-black text-white md:flex">
                {/* Don't think this is required and its cluttering the AppBar at the top. Uncomment this if its required */}
                {/* Download */}
                <DownloadIcon />
              </Button>
              <Button variant="outline" className="block bg-black text-white md:hidden">
                <div>
                  <DownloadIcon />
                </div>
              </Button>
            </Link>
            {renderUIModeToggleButton()}
            <UserAccountDropDown />
          </div>
        </div>

        <p className="ml-2 flex w-full flex-1 items-center justify-center border-t bg-opacity-60 pt-2 text-center font-medium md:hidden">
          {track.title} ({problemIndex + 1} / {track.problems.length})
        </p>
      </div>
    ) : (
      <>
        <motion.div
          className={`z-[50] flex w-full flex-col justify-between gap-2 p-6 md:flex-row ${visible ? "translate-y-0" : "-translate-y-full"}`}
          initial={{ y: 0 }}
          animate={{ y: visible ? 0 : -100 }}
          transition={{ duration: 0.3 }}
        >
          <div className="flex items-center gap-2">
            {/* menu */}
            <div
              onClick={() => setIsOpen(!isOpen)}
              className="text-primary border-primary/10 flex cursor-pointer items-center gap-4 rounded-lg border bg-black/10 p-3 backdrop-blur-lg"
            >
              {isOpen ? <X className="size-6" /> : <Menu className="size-6" />}
            </div>
            {/* track title */}
            <motion.div