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

const { Sider } = Layout;
const LayoutSidebar = () => {
    return (
        <Sider
            width={300}
            breakpoint="lg"
            collapsedWidth="0"
            onBreakpoint={(broken) => {
                // console.log(broken);
            }}
            onCollapse={(collapsed, type) => {
                // console.log(collapsed, type);
            }}
            style={{
                background: 'linear-gradient(180deg, #FF8C42 0%, #FF6B35 100%)',
                overflow: 'auto',
                height: '100vh',
                position: 'fixed',
                left: 0,
                top: 0,
                bottom: 0,
            }}
        >
            <LayoutLogo />
            <LayoutMenu />
        </Sider>
    );
};

export default LayoutSidebar;