Display Modes

The Drawer provides expand modes and a compact mini view.

Expand Modes

For displaying its content, the Drawer provides the following expand modes:

  • "overlay"—The Drawer expands on top of the container content and displays a grayed overlay over it. Use onOverlayClick event handler to handle when the overlay is clicked.
  • "push"—The Drawer expands side by side to the container content by shrinking its width.

To configure the expand mode, use the mode property of the Drawer.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { Drawer, DrawerContent } from '@progress/kendo-react-layout';
import { Switch } from '@progress/kendo-react-inputs';

const App = () => {
    const items = [
        { text: 'Inbox', icon: 'k-i-inbox', selected: true },
        { separator: true },
        { text: 'Notifications', icon: 'k-i-bell' },
        { text: 'Calendar', icon: 'k-i-calendar' },
        { separator: true },
        { text: 'Attachments', icon: 'k-i-hyperlink-email' },
        { text: 'Favourites', icon: 'k-i-star-outline' }
    ];

    const [expanded, setExpanded] = React.useState(true);
    const [mode, setMode] = React.useState(true);
    const [selectedId, setSelectedId] = React.useState(items.findIndex(x => x.selected === true));

    let expandMode = mode ? 'overlay' : 'push';
    let animation = { duration: 400 };

    const handleClick = () => { setExpanded(prevState => !prevState); };
    const handleChange = () => { setMode(prevState => !prevState); };
    const handleSelect = (ev) => {
        setSelectedId(ev.itemIndex);
        setExpanded(false);
    };

    const props = {
        expanded: expanded,
        position: 'start',
        mode: expandMode,
        animation: animation,
        items: items.map(
            (item, index) => ({ ...item, selected: index === selectedId })),

        onOverlayClick: handleClick,
        onSelect: handleSelect
    }

    return (
        <div>
            <Drawer {...props}>
                <DrawerContent>
                    <div className="k-form">
                        <div className="k-form-field">
                            <button className="k-button" onClick={handleClick}>Toggle the Drawer state</button>
                        </div>
                        <div className="k-form-field">
                            <label htmlFor={'expandedSwitch'}>Switch Drawer expand mode &nbsp;</label>
                            <Switch checked={mode} onChange={handleChange} id={'expandedSwitch'}/>

                        </div>
                        <div className="k-form-field">
                            <p>Current drawer mode is <b>{expandMode}</b></p>
                        </div>
                    </div>
                </DrawerContent>
            </Drawer>
            <style>
                {`my-app {
                    padding: 0;
                }
                .k-drawer-content { padding: 20px; }

                .k-drawer-container {
                    position: fixed;
                    width: 100%;
                    height: 100%;
                }`}
            </style>
        </div>
    );
};

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

Mini View

A compact view can be displayed when the Drawer is collapsed. To toggle between expanded and compact views, use its mini property of the Drawer.

The Drawer will always be visible displaying only the item icon even when it is collapsed.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { Drawer, DrawerContent } from '@progress/kendo-react-layout'

const items = [
    { text: 'Inbox', icon: 'k-i-inbox', selected: true },
    { separator: true },
    { text: 'Notifications', icon: 'k-i-bell' },
    { text: 'Calendar', icon: 'k-i-calendar' },
    { separator: true },
    { text: 'Attachments', icon: 'k-i-hyperlink-email' },
    { text: 'Favourites', icon: 'k-i-star-outline' }
];

const App = () => {
    const [expanded, setExpanded] = React.useState(true);
    const [selectedId, setSelectedId] = React.useState(items.findIndex(x => x.selected === true));

    const handleClick = () => { setExpanded(prevState => !prevState); };

    const handleSelect = (ev) => {
        setSelectedId(ev.itemIndex);
        setExpanded(false);
    };

    const props = {
        expanded: expanded,
        position: 'start',
        mode: 'push',
        mini: true,
        items: items.map(
            (item, index) => ({ ...item, selected: index === selectedId })),

        onSelect: handleSelect
    }

    return (
        <div>
            <Drawer {...props}>
                <DrawerContent>
                    <button className="k-button" onClick={handleClick}>Toggle the drawer state</button>
                </DrawerContent>
            </Drawer>
                <style>
                {`my-app {
                    padding: 0;
                }
                .k-drawer-content { padding: 20px; }

                .k-drawer-container {
                    position: fixed;
                    width: 100%;
                    height: 100%;
                }`}
            </style>
        </div>
    )
}

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