# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.reactium.io/reactium-toolkit/components/sidebar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.