import React, { Component } from 'react';
import DrawCategory from './DrawCategory'

import { Layout, Menu, Icon } from 'antd';
import { Link } from "react-router-dom";

const { Sider } = Layout;

class LeftMenu extends Component {
   
    state = {
        collapsed: false,
    };

    onCollapse = collapsed => {
        this.setState({ collapsed });
    }

    render() {

        const { allCategory, mainCategory } = this.props
        
        return (
            <div>
                <Layout style={{ minHeight: '100vh', 'background': 'red' }}>
                    <Sider collapsible
                        collapsed={this.state.collapsed}
                        onCollapse={this.onCollapse}
                    >
                        <Menu key="addCatigory1" theme="dark" defaultSelectedKeys={['1']} mode="inline">    
                            <Menu.Item key="addCatigory">
                                <Link to="/addCategory">
                                    <Icon type="plus" />
                                    <span >Добавить категорию</span>
                                </Link>
                            </Menu.Item>
                        </Menu>                       
                        <DrawCategory allCategory={allCategory} 
                            mainCategory={mainCategory}  
                        />  
                    </Sider>
                </Layout>
            </div>
        );
    }
}

export default LeftMenu;