Svelte component for the classic two/three-column website layout, where the left and right columns can be toggled.
Have a look at the demo, or look at the demo code. (Be sure to check the demo on a mobile device, or in your browser in mobile mode.)
The usual way:
npm install svelte-sidebar-panelsThere are three slots: the main content area, and the left and right columns. (You don't need the left or right columns, e.g. if you want only the left column.)
The component emits an event named change which tells you when the panels
change state, and you bind to updatePanels as a function to manually toggle
the panels (e.g. from a nav menu).
For example, using only the left panel (view in REPL):
<script>
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>For more details, have a look at the documentation for each configurable property.
This project published and released under the Very Open License