import './index.less';
import classNames from "classnames";
import SidebarItem from './sidebar-item';

export interface IsidebarItem {
    key: number,
    name: string,
    icon?: any,
    expanded?: boolean,
    children?: IsidebarItem[],
    url?: string,
}

interface Iprops {
    routes: IsidebarItem[], // 路由
    expanded?: boolean, // 侧边栏是否展开
}

function Sidebar(props: Iprops) {
    return (
        <div className={classNames({
            "sidebar": true,
            "folded": !props.expanded
        })}>
            <div className="scrollable">
                {props.routes.map(route => (
                    <SidebarItem key={route.key} route={route} />
                ))}
            </div>
        </div>
    );
}

Sidebar.defaultProps = {
    expanded: true
}
export default Sidebar;