-
-
Save debendraoli/76123e02be208874b4bf3aed67ab4df1 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