vercel__flags/examples/partial-prerendering/components/sidebar.tsx

'use client';

import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/solid';
import clsx from 'clsx';
import { useState } from 'react';
import { NextLogo } from '#/components/next-logo';
import Byline from '#/components/byline';
import {
  delayRecommendedProducts,
  delayReviews,
  delayShippingEstimate,
} from '#/lib/constants';

export function Sidebar() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="fixed top-0 z-20 flex w-full flex-col border-b border-gray-800 bg-black lg:bottom-0 lg:z-auto lg:w-72 lg:border-b-0 lg:border-r lg:border-gray-800">
      <div className="flex h-14 items-center px-4 py-4 lg:h-auto">
        <div className="group flex w-full items-center gap-x-2.5">
          <div className="h-7 w-7 rounded-full border border-white/30">
            <NextLogo />
          </div>

          <h3 className="font-semibold tracking-wide text-gray-400">
            Partial Prerendering
          </h3>
        </div>
      </div>
      <button
        type="button"
        className="group absolute right-0 top-0 flex h-14 items-center gap-x-2 px-4 lg:hidden"
        onClick={() => {
          setIsOpen(!isOpen);
        }}
      >
        <div className="font-medium text-gray-100 group-hover:text-gray-400">
          Menu
        </div>
        {isOpen ? (
          <XMarkIcon className="block w-6 text-gray-400" />
        ) : (
          <Bars3Icon className="block w-6 text-gray-400" />
        )}
      </button>

      <div
        className={clsx('overflow-y-auto lg:static lg:block', {
          'fixed inset-x-0 bottom-0 top-14 mt-px bg-black': isOpen,
          hidden: !isOpen,
        })}
      >
        <div className="prose prose-sm prose-invert max-w-none space-y-6 px-4 pb-20 text-gray-300">
          <div className="text-gray-400">
            <p>
              <span className="font-bold text-vercel-pink">Pink dots</span>{' '}
              denote artificially delayed responses for demo purposes:
            </p>
            <ul>
              <li>Shipping estimate → {delayShippingEstimate}ms</li>
              <li>Recommended products → {delayRecommendedProducts}ms</li>
              <li>Reviews → {delayReviews}ms</li>
            </ul>
          </div>

          <p>
            <a
              target="_blank"
              href="https://vercel.com/blog/partial-prerendering-with-next-js-creating-a-new-default-rendering-model"
            >
              Partial Prerendering
            </a>{' '}
            combines ultra-quick static edge delivery with fully dynamic
            capabilities. This is different from how your application behaves
            today, where entire routes are either fully static or dynamic.
          </p>
          <p>How it works:</p>
          <ul>
            <li>
              A static route <em>shell</em> is served immediately, this makes
              the initial load fast.
            </li>
            <li>
              The shell leaves <em>holes</em> where dynamic content (that might
              be slower) will be streamed in to minimize the perceived overall
              page load time.
            </li>
            <li>
              The async holes are loaded in parallel, reducing the overall load
              time of the page.
            </li>
          </ul>
          <p className="text-gray-400">
            Try refreshing the page to restart the demo.
          </p>
        </div>
        <Byline className="absolute hidden sm:block" />
      </div>
    </div>
  );
}