import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import { Router, Route, Switch, Link } from "dva/router";
import { Layout, Menu, Icon } from 'antd';

import DemoCustIcon from '@/components/CustIcon/demo';

const { Header, Sider, Content } = Layout;

export default class SiderDemo extends React.Component {
  state = {
    collapsed: false,
  };
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }
  render() {
    return (
      <Layout>
        <Sider
          trigger={null}
          collapsible
          collapsed={this.state.collapsed}
        >
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1">
              <Icon type="user" />CustIcon
              <Link to="/demo/custIcon"></Link>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }}>
            <Icon
              className="trigger"
              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={this.toggle}
            />
          </Header>
          <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
            <Switch>
              <Route
                path="/demo/custIcon"
                render={props => <DemoCustIcon />}
              />
            </Switch>
          </Content>
        </Layout>
      </Layout>
    );
  }
}
