<!-- AUTO-GENERATED by packages/components/bin/generate-skill-component-catalog.js. Do not edit by hand. -->

# r-panel

A collapsible side navigation panel with expandable nav sections, can be collapsed and expanded.

Example
```
<r-panel header="Main navigation">
  <img slot="logo-expanded" src="logo.svg" alt="Company logo" />
  <r-list-item headline="Dashboard"></r-list-item>
  <r-list-item headline="Reports"></r-list-item>
  <r-list-item headline="Settings"></r-list-item>
  <div slot="footer">
    <r-button>Logout</r-button>
  </div>
</r-panel>
```

## class: `RPanel`, `r-panel`

### Fields

| Name            | Privacy | Type                               | Default            | Description                                                                                            | Inherited From |
| --------------- | ------- | ---------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------ | -------------- |
| `active`        |         | `boolean`                          | `false`            | A boolean property that indicates whether the navitems are active of not                               |                |
| `collapsed`     |         | `boolean`                          | `false`            | A boolean property that determines the collapsed state of the component. The default state is `false`. |                |
| `hasFooter`     |         | `boolean`                          | `false`            | A boolean property that indicates whether the component includes a footer                              |                |
| `hasHeader`     |         | `boolean`                          | `false`            | A boolean property that indicates whether the component includes a header                              |                |
| `header`        |         | `string`                           |                    | The `header` property is a string that specifies the header text.                                      |                |
| `labelCollapse` |         | `string`                           | `'Collapse panel'` | Aria-label text for collapse                                                                           |                |
| `labelExpand`   |         | `string`                           | `'Expand panel'`   | Aria-label text for expand                                                                             |                |
| `logoLink`      |         | `string`                           |                    | Logo link                                                                                              |                |
| `variant`       |         | `"drawer" \| "modal" \| "visible"` | `'visible'`        | Presentational style                                                                                   |                |

### Methods

| Name            | Privacy | Description           | Parameters | Return          | Inherited From |
| --------------- | ------- | --------------------- | ---------- | --------------- | -------------- |
| `collapsePanel` |         | Collapse Panel        |            | `Promise<void>` |                |
| `expandPanel`   |         | Expand Panel          |            | `Promise<void>` |                |
| `togglePanel`   |         | Expand/Collapse Panel |            | `Promise<void>` |                |

### Events

| Name                | Type                                   | Description                                | Inherited From |
| ------------------- | -------------------------------------- | ------------------------------------------ | -------------- |
| `panelStateChanged` | `CustomEvent<{ collapsed: boolean; }>` | Event emitted when the panel state changes |                |

### Attributes

| Name             | Field         | Inherited From |
| ---------------- | ------------- | -------------- |
| `active`         | active        |                |
| `collapsed`      | collapsed     |                |
| `has-footer`     | hasFooter     |                |
| `has-header`     | hasHeader     |                |
| `header`         | header        |                |
| `label-collapse` | labelCollapse |                |
| `label-expand`   | labelExpand   |                |
| `logo-link`      | logoLink      |                |
| `variant`        | variant       |                |

### Slots

| Name             | Description                                               |
| ---------------- | --------------------------------------------------------- |
|                  | Navigation items and content placed inside the panel body |
| `footer`         | Content placed at the bottom of the panel                 |
| `logo-collapsed` | Logo shown when the panel is in collapsed state           |
| `logo-expanded`  | Logo shown when the panel is in expanded state            |

<hr/>

## Exports

| Kind                        | Name      | Declaration | Module | Package |
| --------------------------- | --------- | ----------- | ------ | ------- |
| `js`                        | `RPanel`  | RPanel      |        |         |
| `custom-element-definition` | `r-panel` | RPanel      |        |         |