Routing

You can use the PanelBar as a navigational component with the React router.

Using Custom Properties to Set Route Paths

To use custom properties and set the route path:

  1. Apply the route custom property to the PanelBarItem.
  2. Set the property to the corresponding path.
  3. After the user makes a selection, identify the selected PanelBarItem by its route property and redirect the source.
import * as React from 'react';
import { PanelBar, PanelBarItem } from '@progress/kendo-react-layout';
import { withRouter } from 'react-router-dom';

const paths = [
  { path: "/", index: '.0' },
  { path: "/products", index: '.1' },
  { path: "/about", index: '.2' },
  { path: "/about/team", index: '.2.0' },
];

class PanelBarNavContainer extends React.Component {
  onSelect = (event) => {
    this.props.history.push(event.target.props.route);
  }

  setSelectedIndex = (pathName) => {
    let currentPath = paths.find(item => item.path === pathName);
    return currentPath.index;
  }

  render() {
    let selected = this.setSelectedIndex(this.props.location.pathname);
    return (
      <div style={{
        display: 'flex',
        width: '100%'
      }}
      >
        <div style={{
          minWidth: '20%',
          maxWidth: '20%'
        }}
        >
          <PanelBar selected={selected} expandMode={'single'} onSelect={this.onSelect}>
            <PanelBarItem title={'Home'} route="/" />
            <PanelBarItem title={'Products'} route="/products" />
            <PanelBarItem title={'About'} route="/about">
              <PanelBarItem title={'Team'} route="/about/team" />
            </PanelBarItem>
          </PanelBar>
        </div>
        <div style={{
          paddingLeft: '10pt'
        }}>{this.props.children}</div>
      </div>
    );
  }
}

export default withRouter(PanelBarNavContainer);
 /