> For the complete documentation index, see [llms.txt](https://docs.reactium.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.reactium.io/reactium-toolkit/components/sidebar.md).

# Sidebar

The Sidebar component is accessible as a [**Reactium.Handle**](https://atomic-reactor.github.io/Reactium/#api-Reactium.Handle-Reactium.Handle) object. You can gain access to the Sidebar by doing the following:

```jsx
import React from 'react'; 
import Reactium, { useHandle } from 'reactium-core/sdk';

const SidebarToggleButton = () => {

    const Sidebar = useHandle('RTKSidebar');
    
    return (
        <button onClick={() => Sidebar.toggle()}>
            Toggle Sidebar
        </button>
    );
};
```

## Properties

| Property      | Type      | Description                        |
| ------------- | --------- | ---------------------------------- |
| **collapsed** | `Boolean` | The collapsed state of the Sidebar |
| **expanded**  | `Boolean` | The expanded state of the Sidebar  |

## Methods

### collapse()

Collapse the Sidebar if it is expanded. The `collapse` and `collapsed` events are triggered. \
Returns a Promise that resolves when the collapse animation is complete.

```jsx
import React, { useEffect } from 'react'; 
import Reactium, { useHandle } from 'reactium-core/sdk';

const SidebarCollapseButton = () => {

    const Sidebar = useHandle('RTKSidebar');
    
    useEffect(() => {
        Sidebar.addEventListener('collapse', console.log);
        Sidebar.addEventListener('collapsed', console.log);

        return () => {
            Sidebar.removeEventListener('collapse', console.log);
            Sidebar.removeEventListener('collapsed', console.log);
        };
    }, [Sidebar]);
    
    return (
        <button onClick={() => Sidebar.collapse()}>
            Collapse Sidebar
        </button>
    );
};
```

### expand()

Expand the Sidebar if it is collapsed. The `expand` and `expanded` events are triggered. \
Returns a Promise that resolves when the expand animation is complete.&#x20;

```jsx
import React, { useEffect } from 'react'; 
import Reactium, { useHandle } from 'reactium-core/sdk';

const SidebarExpandButton = () => {

    const Sidebar = useHandle('RTKSidebar');
    
    useEffect(() => {
        Sidebar.addEventListener('expand', console.log);
        Sidebar.addEventListener('expanded', console.log);

        return () => {
            Sidebar.removeEventListener('expand', console.log);
            Sidebar.removeEventListener('expanded', console.log);
        };
    }, [Sidebar]);
    
    return (
        <button onClick={() => Sidebar.expand()}>
            Expand Sidebar
        </button>
    );
};
```

## Events

### collapse

Triggered when the collapse animation starts as a side effect of `collapse()` or `toggle()`

### collapsed

Triggered when the collapse animation is completed as a side effect of `collapse()` or `toggle()`&#x20;

### expand

Triggered when the expand animation starts as a side effect `expand()` or `toggle()`

### expanded

Triggered when the expand animation is completed as a  side effect of `collapse()` or `toggle()`

### resize

Triggered during the expand/collapse animation. The current width of the sidebar is provided as  a property on the event.