Layout with multiple Outlets

export function MapLayout({
  navigationSlot,
  contentSlot,
  mapSlot,
}: MapLayoutProps) {
  return (
    <AppLayout>
      {navigationSlot}

      <Resizable.Group>
        <Resizable.Panel
          collapsible
          collapsedSize="72px"
          defaultSize="640px"
          maxSize="640px"
          minSize="260px"
        >
          <Panel.Root variant="content">
            <HeaderNavigation brand={<SidebarAction.Toggle />} />
            <Panel.Content>{contentSlot}</Panel.Content>
          </Panel.Root>
        </Resizable.Panel>
        <Resizable.Separator />

        <ClientOnly>
          <Resizable.Panel>{mapSlot}</Resizable.Panel>
        </ClientOnly>
      </Resizable.Group>
    </AppLayout>
  )
}

export const Route = createFileRoute('/_authed/farms')({
  component: RouteComponent,
})

function RouteComponent() {
  return <MapLayout contentSlot={<Outlet />} mapSlot={<Map />} />
}