# ef-sidebar-layout

Provides an app layout with sidebar.
There are 4 sections that can be slotted a component in.

## Properties

| Property          | Attribute          | Type                  | Default | Description                                      |
|-------------------|--------------------|-----------------------|---------|--------------------------------------------------|
| `collapsed`       | `collapsed`        | `boolean`             | false   | Set to hide sidebar                              |
| `sidebarPosition` | `sidebar-position` | `"left" \| "right"`   | "left"  | Set sidebar position to left or right            |
| `sidebarWidth`    | `sidebar-width`    | `string \| undefined` |         | Set the width of the sidebar. The value could be in both px or %, e.g. 300px, 30% |

## Slots

| Name              | Description              |
|-------------------|--------------------------|
| `main-content`    | Content of main section. |
| `main-header`     | Main header.             |
| `sidebar-content` | Content of sidebar.      |
| `sidebar-header`  | Sidebar header.          |