-
-
Save iDanielLaw/8f08528486f30e48698e1cdc479f46bf to your computer and use it in GitHub Desktop.
Sider menu + ant-design + react-router-dom
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import { BrowserRouter as Router, Route, Link } from "react-router-dom"; | |
import { Layout, Menu, Icon } from 'antd'; | |
import Dashboard from './containers/Dashboard/Dashboard'; | |
import Meseros from './containers/Meseros/Meseros'; | |
const { Header, Content, Footer, Sider } = Layout; | |
const SubMenu = Menu.SubMenu; | |
class RouterApp extends Component { | |
state = { | |
collapsed: false, | |
}; | |
onCollapse = (collapsed) => { | |
this.setState({ collapsed }); | |
} | |
toggle = () => { | |
this.setState({ | |
collapsed: !this.state.collapsed, | |
}); | |
} | |
render() { | |
return ( | |
<Router> | |
<Layout style={{ minHeight: '100vh' }}> | |
<Sider | |
collapsible | |
collapsed={this.state.collapsed} | |
onCollapse={this.onCollapse}> | |
<div className="logo" /> | |
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline"> | |
<Menu.Item key="1"> | |
<Icon type="pie-chart" /> | |
<span>Deshboard</span> | |
<Link to="/" /> | |
</Menu.Item> | |
<Menu.Item key="2"> | |
<Icon type="desktop" /> | |
<span>Meseros</span> | |
<Link to="/meseros" /> | |
</Menu.Item> | |
</Menu> | |
</Sider> | |
<Layout> | |
<Header style={{ background: '#fff', padding: 0, paddingLeft: 16 }}> | |
<Icon | |
className="trigger" | |
type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'} | |
style={{ cursor: 'pointer' }} | |
onClick={this.toggle} | |
/> | |
</Header> | |
<Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}> | |
<Route exact path="/" component={Dashboard} /> | |
<Route path="/meseros" component={Meseros} /> | |
</Content> | |
<Footer style={{ textAlign: 'center' }}> | |
Ant Design ©2016 Created by Ant UED | |
</Footer> | |
</Layout> | |
</Layout> | |
</Router> | |
); | |
} | |
} | |
export default RouterApp; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment