Snippet: Native style snap

[trasherdk]

Use theme to enforce min-width in CSS when the sidebar is open.

Also calculate the "breakpoint" on window resize, to half the minimum width of the sidebar, converted to a percentage. Otherwise, the breakpoint would move when the window is resized.

<script>
  const sidebarMinWidth = 200 // in px
  let windowWidth // in px

  // Calculate "breakpoint" on window resize (half the width of the sidebar,
  // converted to a percentage of the window's inner width)
  let sidebarSnap = 0
  $: sidebarSnap = ((sidebarMinWidth / windowWidth) * 100) / 2

  let sidebarState = 'open'

  const onSidebarResize = (event) => {
    const { size, snap } = event.detail[0]
    if (sidebarState === 'open' && size < snap) {
      sidebarState = 'closed'
    }
    else if (sidebarState === 'closed' && size > snap) {
      sidebarState = 'open'
    }
  }
</script>

<svelte:window bind:innerWidth={windowWidth} />

<Splitpanes theme={sidebarState} on:resize={onSidebarResize}>
  <Pane size={0} minSize={0} maxSize={80} snapSize={sidebarSnap} class="sidebar"></Pane>
  <Pane></Pane>
</Splitpanes>

<style global lang="scss">
  .splitpanes.open .sidebar {
    min-width: 200px;
  }
</style>

Source: orefalo#37 (comment)