Positioning

The Drawer enables you to specify its position in relation to the page content.

To specify the side of the content to which the Drawer will be displayed, use the position property.

The Drawer provides the following options for positioning:

  • start—Positions the Drawer to the left of the content.
  • end—Positions the Drawer to the right of the content.
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 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 [position, setPosition] = React.useState(true);
    const [selectedId, setSelectedId] = React.useState(items.findIndex(x => x.selected === true));

    let positionMode = position ? 'start' : 'end';

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

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

    const handleChange = () => { setPosition(prevState => !prevState); };

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

        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={'switchPosition'}>Switch Drawer position&nbsp;</label>
                            <Switch checked={position} onChange={handleChange} id={'switchPosition'}/>

                        </div>
                        <div className="k-form-field">
                            <p>Current drawer position is <b>{positionMode}</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%;
                }
                .k-drawer-item {
                    user-select: none;
                }`}
            </style>
        </div>
    );
};

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