feat: resizable panels

page.tsx

import ResizablePanels from '../_components/resizable-panels'
import {cookies} from 'next/headers'

const EditorLayout = () => {
  const defaultLayout = getDefaultLayout()
  return (
    <div className="flex h-full flex-grow flex-col">
      <ResizablePanels defaultLayout={defaultLayout} />
    </div>
  )
}

export default EditorLayout

function getDefaultLayout() {
  const layout = cookies().get('react-resizable-panels:editor')
  if (layout) {
    return JSON.parse(layout.value)
  }
  // in percentages
  return [25, 50, 25]
}

resizable-panels.tsx

'use client'
import {Panel, PanelGroup, PanelResizeHandle} from 'react-resizable-panels'

export default function ResizablePanels({
  defaultLayout,
}: {
  defaultLayout: number[]
}) {
  const onLayout = (sizes: number[]) => {
    document.cookie = `react-resizable-panels:editor=${JSON.stringify(sizes)}`
  }

  return (
    <PanelGroup
      className="h-full flex-grow p-4"
      direction="horizontal"
      autoSaveId="editor"
      onLayout={onLayout}
    >
      <Panel
        className="h-full rounded bg-background"
        defaultSize={defaultLayout[0]}
        minSize={10}
        order={0}
      >
        <nav className="flex h-full flex-col overflow-y-auto p-5">
          {new Array(100).fill('').map(() => (
            <div>navigation</div>
          ))}
        </nav>
      </Panel>
      <PanelResizeHandle className="mx-1 w-1 cursor-col-resize rounded hover:bg-slate-200" />
      <Panel
        className="rounded bg-background p-5"
        defaultSize={defaultLayout[1]}
        minSize={30}
        order={1}
      >
        <main className="flex h-full flex-col overflow-y-auto p-5">editor</main>
      </Panel>
      <PanelResizeHandle className="mx-1 w-1 rounded hover:bg-slate-200" />
      <Panel
        className="rounded bg-background p-5"
        defaultSize={defaultLayout[2]}
        minSize={10}
        order={2}
      >
        <aside className="flex h-full flex-col overflow-y-auto p-5">assistant</aside>
      </Panel>
    </PanelGroup>
  )
}

docs: https://github.com/bvaughn/react-resizable-panels?tab=readme-ov-file#how-can-i-use-persistent-layouts-with-ssr