import React from 'react'
import { Layout } from 'antd';
import LayoutLogo from './LayoutLogo';
import LayoutMenu from './LayoutMenu';

const { Sider } = Layout;
const LayoutSidebar = () => {
    const [collapsed, setCollapsed] = React.useState(false);
    return (
        <Sider 
            width={300}
            // width={0}
            breakpoint="lg"
            collapsedWidth="0"
            onBreakpoint={(broken) => {
                // console.log(broken);
            }}
            // trigger={null}
            collapsible 
            collapsed={collapsed} 
            onCollapse={value => setCollapsed(value)}
            // onCollapse={(collapsed, type) => {
            //     console.log(collapsed, type);
            // }}
        >
            <LayoutLogo />
            <LayoutMenu />
        </Sider>
    )
}

export default LayoutSidebar