MapComplete/src/UI/Base/DrawerRight.svelte

<script lang="ts">
  import { Drawer } from "flowbite-svelte"
  import { sineIn } from "svelte/easing"
  import { Store } from "../../Logic/UIEventSource.js"
  import { onMount } from "svelte"
  import { AndroidPolyfill } from "../../Logic/Web/AndroidPolyfill"
  import InsetSpacer from "./InsetSpacer.svelte"

  export let shown: Store<boolean>
  let transitionParams = {
    x: 640,
    duration: 200,
    easing: sineIn,
  }
  let hidden = !shown.data

  shown.addCallback((sh) => {
    hidden = !sh
  })

  // Does not need a 'top-inset-spacer' as the code below will apply the padding automatically
  let height = 0

  function setHeight(){
    let topbar = document.getElementById("top-bar")
    height = (topbar?.clientHeight ?? 0) + AndroidPolyfill.getInsetSizes().top.data
  }

  onMount(() => setHeight())
  AndroidPolyfill.getInsetSizes().top.addCallback(() => setHeight())

</script>

<Drawer
  placement="right"
  transitionType="fly"
  {transitionParams}
  activateClickOutside={false}
  divClass="overflow-y-auto z-3"
  backdrop={false}
  id="drawer-right"
  width="w-full sm:w-80 md:w-96"
  rightOffset="inset-y-0 right-0"
  bind:hidden
>
  <div class="flex flex-col h-full">

  <div class="low-interaction h-screen">
    <div style={`padding-top: ${height}px`}>
      <div class="flex h-full flex-col overflow-y-auto">
        <slot />
      </div>
    </div>
  </div>
  <InsetSpacer clss="low-interaction" height={AndroidPolyfill.getInsetSizes().bottom}/>
  </div>
</Drawer>