Routing

You can use the Drawer as a container for a navigational components with any router library.

Using Custom Properties to Set Route Paths

To use custom properties and set the route path:

  1. Pass route custom property to the items collection.
  2. Set the property to the corresponding path.
  3. After the user makes a selection, identify the selected item and redirect the source.
import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { HashRouter, Switch, Route } from 'react-router-dom';

import About from './About.jsx';
import Home from './Home.jsx';
import Products from './Products.jsx';
import DrawerContainer from './DrawerContainer.jsx';

ReactDOM.render(
    <React.Fragment>
        <HashRouter>
            <DrawerContainer>
                <Switch>
                    <Route exact={true} path="/" component={Home} />
                    <Route exact={true} path="/products" component={Products} />
                    <Route exact={true} path="/about" component={About} />
                </Switch>
            </DrawerContainer>
        </HashRouter >
        <style>
            {`my-app {
                padding: 0;
            }
            .k-drawer-container {
                position: fixed;
                width: 100%;
                height: 100%;
            }
            .k-drawer-item {
                user-select: none;
            }
            .k-icon {
                font-size: 20px;
            }
            .title {
                margin-left: 20px;
                font-weight: bold;
                font-size: 17px;
            }
            .custom-toolbar {
                width: 100%;
                background-color: #f6f6f6;
                line-height: 10px;
                border-bottom: inset;
                border-bottom-width: 1px;
                padding: 3px 8px;
                color: #656565;
            }
            .k-drawer-container {
                position: fixed;
                width: 100%;
                height: 100%;
            }
            .k-drawer-content {
                padding: 10px;
            }`}
        </style>
    </React.Fragment>,
    document.querySelector('my-app')
);