<script>
// From: https://github.com/saibotsivad/svelte-sidebar-panels
// This demo only shows the left panel, but the component also
// supports a right panel. You can configure the width of each
// panel separately, and many other properties.
import SidebarPanels from 'svelte-sidebar-panels'
let updatePanels
let leftOpen
</script>
<SidebarPanels
bind:updatePanels
on:change={ (event) => leftOpen = event.detail.left }
>
<div slot="left">
left panel
</div>
<div slot="content">
main content
<button on:click={ () => updatePanels({ left: !leftOpen }) }>
toggle left panel
</button>
</div>
</SidebarPanels>
<style>
/*
The content area needs a background color, or it won't actually
hide the left/right panels.
*/
div[slot="content"] {
background-color: #eee;
min-height: 100%;
}
</style>