简单易用的 Ant Design Pro 风格 Sider 组件

Lightweight Ant Design Pro like <Sider /> component integrated with Ant Design Menu.

Automatically match Menu openKeys & selectKeys with current page pathname.

Installation

yarn add react-sider react antd lodash

Preview

Usage

Property	Description	Type	Default
className	className of container	string	''
style	style of container	object	{ }
appName	name of application	string	''
appLogo	img src of application logo	string	''
appBaseUrl	href of sider header	string	'/'
width	sider container width	number	256
menuData	data of sider menu	[{ name: string, path: string, icon: string, children: [ ] ]}]	[ ]
pathname	current page pathname	string	'/'

Example

import ReactSider from 'react-sider';
import logo from 'assets/logo.svg';
import 'react-sider/lib/index.css';

const menuData = [{
  // MenuItem name
  name: 'Dashboard',
  // MenuItem icon (antd icon)
  icon: 'dashboard',
  // MenuItem relative path
  path: '/dashboard',
  // SubMenu
  children: [{
    name: 'Analysis',
    path: '/dashboard/analysis',
    children: [{
      name: 'Real-time',
      path: '/dashboard/analysis/realtime',
    }, {
      name: 'Offline',
      path: '/dashboard/analysis/offline',
    }],
  },
  {
    name: 'Monitor',
    path: '/dashboard/monitor',
  },
  {
    name: 'Workplace',
    path: '/dashboard/workplace',
  }],
}, {
  name: 'Marketing',
  icon: 'table',
  path: '/marketing',
}, {
  name: 'Settings',
  icon: 'setting',
  path: '/settings',
  children: [{
    name: 'Users Management',
    path: '/settings/users',
  }],
}];

const Sider = () => (
  <ReactSider
    appName="React App Pro"
    appLogo={logo}
    menuData={menuData}
    pathname={this.props.location.pathname}
  />
)

export default Sider;