budibase/packages/builder/src/components/userInterface/Layout.svelte

<script>
  import { goto } from "@sveltech/routify"
  import { FrontendTypes } from "constants"
  import ComponentTree from "./ComponentNavigationTree/ComponentTree.svelte"
  import LayoutDropdownMenu from "./ComponentNavigationTree/LayoutDropdownMenu.svelte"
  import initDragDropStore from "./ComponentNavigationTree/dragDropStore"
  import NavItem from "components/common/NavItem.svelte"
  import { last } from "lodash/fp"
  import { store, currentAsset, selectedComponent } from "builderStore"
  import { writable } from "svelte/store"

  export let layout
  export let border

  let confirmDeleteDialog
  let componentToDelete = ""

  const dragDropStore = initDragDropStore()

  const selectLayout = () => {
    store.actions.layouts.select(layout._id)
    $goto(`./${layout._id}`)
  }
</script>

<NavItem
  {border}
  icon="ri-layout-3-line"
  text={layout.name}
  withArrow
  selected={$store.currentAssetId === layout._id}
  opened={$store.currentAssetId === layout._id}
  on:click={selectLayout}>
  <LayoutDropdownMenu {layout} />
</NavItem>

{#if $store.currentAssetId === layout._id && layout.props?._children}
  <ComponentTree
    components={layout.props._children}
    currentComponent={$selectedComponent}
    {dragDropStore} />
{/if}