# 侧边导航栏组件

## 1.功能说明

侧边导航栏，根据传入的参数，展示路由菜单。

## 2.组件依赖

- react

- react-router-dom

- antd

- classnames

## 3.依赖结构体

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

## 4.组件接口

```tsx
interface Iprops {
    routes: IsidebarItem[], // 路由
    expanded?: boolean, // 侧边栏是否展开
}
```
## 5.案例

1)导入组件

```tsx
import Sidebar from './common/sidebar';
```

2)使用

```tsx
<Sidebar routes={[
    { key: 1, name: "sss" }, { key: 2, name: "sssdfrfrf" },
    { key: 3, name: "sss" }, { key: 4, name: "sssdfrfrf" },
    { key: 5, name: "sss" }, { key: 6, name: "sssdfrfrf" },
    { key: 7, name: "sss" }, { key: 8, name: "sssdfrfrf" },
    { key: 9, name: "sss" }, { key: 10, name: "sssdfrfrf" },
]} />
```