Sidebar

The Sidebar component is accessible as a Reactium.Handle object. You can gain access to the Sidebar by doing the following:

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.

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.

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()

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.