Polish docs site layout, motion, and example panels

index.css

@@ -12,3 +12,198 @@
   --color-focus-2: var(--color-sky-400);
   --color-focus-3: var(--color-sky-600);
 }
+
+:root {
+  --docs-ease: cubic-bezier(0.16, 1, 0.3, 1);
+  --docs-duration: 180ms;
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+@media only screen and (max-width: 600px) {
+  :root {
+    font-size: 16px;
+  }
+}
+
+.tok-comment {
+  color: var(--color-slate-400);
+}
+
+/* Chrome: h-12 + p-4 collapsed the bar below the logo. */
+#root .max-w-350 > .h-12 {
+  height: auto;
+  min-height: 3.75rem;
+  padding-block: 0.625rem;
+  padding-inline: 1.25rem;
+}
+
+@media (max-width: 639px) {
+  #root .max-w-350 > .h-12 {
+    gap: 0.5rem;
+    padding-inline: 0.75rem;
+  }
+
+  /* ^K is a text node in the pill — hide it, keep the icon. */
+  #root .max-w-350 > .h-12 .h-8.rounded-full {
+    width: 2rem;
+    padding-inline: 0;
+    gap: 0;
+    font-size: 0;
+  }
+
+  #root
+    .max-w-350
+    > .h-12
+    .group:has([aria-label="Documentation for other versions"]) {
+    display: none;
+  }
+}
+
+/* Sidebar: one scroller, room at the end of a long nav. */
+#root section:has(> nav) {
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 1.25rem 1rem 2.5rem;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-slate-400) transparent;
+}
+
+@media (min-width: 768px) {
+  #root section:has(> nav) {
+    flex: 0 0 17.5rem;
+    width: 17.5rem;
+  }
+}
+
+#root nav {
+  height: auto;
+  overflow: visible;
+  padding: 0;
+  margin: 0;
+  gap: 1.25rem;
+}
+
+/* Content: clear the top mask, give demos real height, group code+preview. */
+[data-main-scrollable] {
+  padding: 1.75rem 1.15rem 3.5rem;
+}
+
+@media (min-width: 768px) {
+  [data-main-scrollable] {
+    padding: 2.25rem 2rem 4rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  [data-main-scrollable] {
+    padding-inline: 2.5rem;
+  }
+}
+
+[data-main-scrollable] > .flex.flex-col {
+  gap: 1.35rem;
+  padding-bottom: 1.5rem;
+}
+
+[data-main-scrollable] > .flex.flex-col > header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.4rem;
+  margin-bottom: 0.25rem;
+}
+
+[data-main-scrollable] > .flex.flex-col > header svg.size-4.text-slate-400 {
+  display: none;
+}
+
+[data-main-scrollable] [data-section] {
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: color-mix(in oklab, white 58%, var(--color-fuchsia-300));
+}
+
+[data-main-scrollable] [data-title] {
+  font-size: 1.5rem;
+  font-weight: 650;
+  letter-spacing: -0.03em;
+  line-height: 1.2;
+  text-wrap: balance;
+}
+
+[data-main-scrollable] > .flex.flex-col > div:not([class]) {
+  max-width: 68ch;
+}
+
+[data-main-scrollable] [data-group] {
+  min-height: 11.5rem;
+}
+
+[data-main-scrollable] [data-group][style*="column"] {
+  min-height: 16rem;
+}
+
+[data-main-scrollable] [data-group] [data-group] {
+  min-height: 0;
+}
+
+[data-main-scrollable] .relative:has(> code) + [data-group],
+[data-main-scrollable] .relative:has(> code) + .relative:has(> code) {
+  margin-top: -0.45rem;
+}
+
+#root .fixed.inset-0.backdrop-blur-md {
+  padding-top: 10vh;
+  background: rgb(0 0 0 / 0.4);
+  animation: docs-search-in var(--docs-duration) var(--docs-ease) both;
+}
+
+#root .fixed.inset-0.backdrop-blur-md > div {
+  box-shadow:
+    0 8px 28px oklch(0.28 0.08 300 / 0.45),
+    0 0 0 1px oklch(0.72 0.2 320 / 0.35);
+}
+
+#root .fixed.inset-0.backdrop-blur-md[data-docs-search-exit] {
+  animation: docs-search-out var(--docs-duration) var(--docs-ease) both;
+}
+
+@keyframes docs-search-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes docs-search-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+[data-main-scrollable].docs-content-fade {
+  animation: docs-content-in 280ms var(--docs-ease) both;
+}
+
+@keyframes docs-content-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition: none !important;
+    animation: none !important;
+  }
+}

index.html

@@ -6,10 +6,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 
     <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="react-resizable-panels" />

index.tsx

@@ -2,9 +2,14 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./src/App.tsx";
+import { bindDocsContentMotion } from "./src/docsContentMotion";
+import { bindSearchOverlayMotion } from "./src/searchOverlayMotion";
 
-createRoot(document.getElementById("root")!).render(
+const root = document.getElementById("root")!;
+createRoot(root).render(
   <StrictMode>
     <App />
   </StrictMode>
 );
+bindSearchOverlayMotion();
+bindDocsContentMotion();

src/App.tsx

@@ -1,4 +1,5 @@
 import { ArrowTurnDownRightIcon } from "@heroicons/react/20/solid";
+import { type ReactNode } from "react";
 import {
   AppRoot,
   Callout,
@@ -17,6 +18,27 @@ import { Panel } from "./components/styled-panels/Panel";
 import { Separator } from "./components/styled-panels/Separator";
 import { routes } from "./routes";
 
+function NestedNavLink({
+  children,
+  path
+}: {
+  children: ReactNode;
+  path: Parameters<typeof NavLink>[0]["path"];
+}) {
+  return (
+    <NavLink
+      className="flex items-center gap-1.5 whitespace-nowrap"
+      path={path}
+    >
+      <ArrowTurnDownRightIcon
+        aria-hidden
+        className="size-3.5 shrink-0 fill-fuchsia-200"
+      />
+      {children}
+    </NavLink>
+  );
+}
+
 export default function App() {
   return (
     <AppRoot
@@ -34,18 +56,15 @@ export default function App() {
             <NavLink path="/examples/persistent-layout">
               Persistent layouts
             </NavLink>
-            <NavLink path="/examples/persistent-layout/conditional-panels">
-              <ArrowTurnDownRightIcon className="size-4 fill-white/60" />
+            <NestedNavLink path="/examples/persistent-layout/conditional-panels">
               Conditional panels
-            </NavLink>
-            <NavLink path="/examples/persistent-layout/server-rendering">
-              <ArrowTurnDownRightIcon className="size-4 fill-white/60" /> Server
-              rendering
-            </NavLink>
-            <NavLink path="/examples/persistent-layout/server-components">
-              <ArrowTurnDownRightIcon className="size-4 fill-white/60" /> Server
-              components
-            </NavLink>
+            </NestedNavLink>
+            <NestedNavLink path="/examples/persistent-layout/server-rendering">
+              Server rendering
+            </NestedNavLink>
+            <NestedNavLink path="/examples/persistent-layout/server-components">
+              Server components
+            </NestedNavLink>
             <NavLink path="/examples/nested-groups">Nested groups</NavLink>
             <NavLink path="/examples/conditional-panels">
               Conditional panels
@@ -96,13 +115,9 @@ export default function App() {
             resizable layouts like the one below:
           </div>
           <Group>
-            <Panel className="p-1" minSize={100}>
-              This panel is resizable
-            </Panel>
+            <Panel minSize={100}>This panel is resizable</Panel>
             <Separator />
-            <Panel className="p-1" minSize={100}>
-              This one is too
-            </Panel>
+            <Panel minSize={100}>This one is too</Panel>
           </Group>
           <div>
             There are many types of layouts, covered in the{" "}

src/components/styled-panels/Panel.tsx

@@ -28,7 +28,7 @@ export function Panel({
   return (
     <PanelExternal
       className={cn(
-        "bg-slate-800 rounded rounded-md",
+        "bg-slate-800 rounded-md",
         disabled && "opacity-65",
         className
       )}

src/components/styled-panels/PanelText.tsx

@@ -2,7 +2,7 @@ import type { PropsWithChildren } from "react";
 
 export function PanelText({ children }: PropsWithChildren) {
   return (
-    <div className="w-full min-h-full flex flex-col items-center justify-center p-1">
+    <div className="flex min-h-full w-full flex-col items-center justify-center px-3 py-2.5 text-center">
       {children}
     </div>
   );

src/components/styled-panels/Separator.tsx

@@ -21,18 +21,18 @@ export function Separator({
   return (
     <SeparatorExternal
       className={cn(
-        "rounded rounded-xs flex items-center justify-center",
+        "flex items-center justify-center overflow-hidden rounded-xs",
         "bg-slate-600 [&[data-separator='disabled']]:opacity-50 [&[data-separator='hover']]:bg-slate-500 [&[data-separator='active']]:bg-slate-400",
         "text-slate-900 [&[data-separator='hover']]:text-slate-950 [&[data-separator='active']]:text-slate-950",
         useFocusPseudoClasses
           ? "focus-visible:bg-sky-400!"
           : "[&[data-separator='focus']]:bg-sky-400",
-        orientation === "horizontal" ? "w-4 sm:w-2" : "h-4 sm:h-2",
+        orientation === "horizontal" ? "w-3.5 sm:w-2.5" : "h-3.5 sm:h-2.5",
         className
       )}
       {...rest}
     >
-      <GrabDotsIcon className="w-6 h-6 sm:w-4 sm:h-4 shrink-0" />
+      <GrabDotsIcon className="size-3.5 sm:size-2.5 shrink-0" />
     </SeparatorExternal>
   );
 }

src/docsContentMotion.ts

@@ -0,0 +1,36 @@
+function replayContentFade() {
+  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return;
+  }
+
+  const el = document.querySelector("[data-main-scrollable]");
+  if (!(el instanceof HTMLElement)) {
+    return;
+  }
+
+  el.classList.remove("docs-content-fade");
+  void el.offsetWidth;
+  el.classList.add("docs-content-fade");
+}
+
+function wrapHistory(
+  method: "pushState" | "replaceState"
+): typeof history.pushState {
+  const original = history[method];
+  return function (this: History, ...args: Parameters<typeof history.pushState>) {
+    const prevPath = location.pathname;
+    const result = original.apply(this, args);
+    if (location.pathname !== prevPath) {
+      requestAnimationFrame(() => requestAnimationFrame(replayContentFade));
+    }
+    return result;
+  };
+}
+
+export function bindDocsContentMotion() {
+  history.pushState = wrapHistory("pushState");
+  history.replaceState = wrapHistory("replaceState");
+  window.addEventListener("popstate", () => {
+    requestAnimationFrame(() => requestAnimationFrame(replayContentFade));
+  });
+}