https://github.com/saibotsivad/svelte-sidebar-panels

Left and right side panel navigational menu component.
https://github.com/saibotsivad/svelte-sidebar-panels

svelte

Last synced: 17 days ago
JSON representation

Left and right side panel navigational menu component.

• Host: GitHub
• URL: https://github.com/saibotsivad/svelte-sidebar-panels
• Owner: saibotsivad
• License: other
• Created: 2018-12-15T00:03:45.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2023-02-20T22:26:21.000Z (over 1 year ago)
• Last Synced: 2024-10-10T08:37:20.871Z (29 days ago)
• Topics: svelte
• Language: Svelte
• Homepage: https://saibotsivad.github.io/svelte-sidebar-panels/
• Size: 219 KB
• Stars: 6
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Svelte Sidebar Panels

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](https://saibotsivad.github.io/svelte-sidebar-panels/), or look at the

[demo code](https://github.com/saibotsivad/svelte-sidebar-panels/blob/main/src/demo/Demo.svelte).

(Be sure to check the demo on a mobile device, or in your browser in mobile mode.)

# Install

The usual way:

```bash

npm install svelte-sidebar-panels

```

# Use

There are three [slots](https://svelte.dev/docs#slot): 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](https://svelte.dev/repl/17b29437e2a9465695c82b30f4896929)):

```html

	import SidebarPanels from 'svelte-sidebar-panels'

	let updatePanels

	let leftOpen

 leftOpen = event.detail.left }

>

	


		left panel

	

	


		main content

		 updatePanels({ left: !leftOpen }) }>

			toggle left panel

		

	


```

For more details, have a look at the [documentation for each configurable property](https://github.com/saibotsivad/svelte-sidebar-panels/blob/main/src/SidebarPanels.svelte).

### License

This project published and released under the [Very Open License](http://veryopenlicense.com)