Expanded State

The Drawer enables you to set its expanded state and change it on demand by using the corresponding property.

Controlling the Expanded State

To specify the state of display for the Drawer, use its expanded Boolean property. By default, expanded is set to false.

<style>
    my-app {
        padding: 0;
    }
    .k-drawer-content {
        padding: 20px;
    }
    .k-drawer-container {
        position: fixed;
        width: 100%;
        height: 100%;
    }
</style>
const App = () => {
    const items = [
        { text: 'Inbox', icon: 'k-i-inbox' },
        { text: 'Calendar', icon: 'k-i-calendar' },
        { text: 'Attachments', icon: 'k-i-hyperlink-email' },
        { text: 'Favourites', icon: 'k-i-star-outline' }
    ];

    const [expanded, setExpanded] = React.useState(true);
    const handleClick = () => { setExpanded(prevState => !prevState); };

    return (
        <Drawer expanded={expanded} position='start' mode='push' items={items}>
            <DrawerContent>
                <button className="k-button" onClick={handleClick}>Toggle the drawer state</button>
            </DrawerContent>
        </Drawer>
    );
};

ReactDOM.render(
    <App/>,
    document.querySelector('my-app')
);
 /