Nested mixed-direction resizable layout.

<script setup lang="ts">
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"
</script>

<template>
  <div class="mx-auto w-full max-w-lg">
    <ResizablePanelGroup direction="horizontal" class="rounded-2xl min-h-[300px] border">
      <ResizablePanel :default-size="40">
        <div class="flex h-full items-center justify-center p-6">
          <span class="text-sm font-semibold">Side</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel :default-size="60">
        <ResizablePanelGroup direction="vertical">
          <ResizablePanel :default-size="30">
            <div class="flex h-full items-center justify-center p-6">
              <span class="text-sm font-semibold">Top</span>
            </div>
          </ResizablePanel>
          <ResizableHandle />
          <ResizablePanel :default-size="70">
            <div class="flex h-full items-center justify-center p-6">
              <span class="text-sm font-semibold">Bottom</span>
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </ResizablePanel>
    </ResizablePanelGroup>
  </div>
</template>