import * as React from 'react';
import { Menu, Icon } from '@btri-ui/base';
export default () => {
  // 菜单项务必填写 key
  const IconItems = [
    {
      label: '菜单项一',
      key: 'item-1',
      icon: <Icon iconName="Home" />,
      children: [
        { label: '二级导航', key: 'submenu-item-10' },
        { label: '二级导航', key: 'submenu-item-20' },
        { label: '二级导航', key: 'submenu-item-30' },
      ],
    },
    {
      type: 'group',
      label: '分组类型一',
      children: [
        {
          label: '一级导航',
          key: 'item-2',
          icon: <Icon iconName="Home" />,
          children: [
            { label: '二级导航', key: 'submenu-item-11' },
            { label: '二级导航', key: 'submenu-item-21' },
            { label: '二级导航', key: 'submenu-item-31' },
          ],
        },
        {
          label: '一级导航',
          key: 'item-3',
          icon: <Icon iconName="Home" />,
          children: [
            { label: '二级导航', key: 'submenu-item-12' },
            { label: '二级导航', key: 'submenu-item-22' },
            { label: '二级导航', key: 'submenu-item-32' },
          ],
        },
      ],
    },
    {
      type: 'group',
      label: '分组类型二',
      children: [
        {
          label: '一级导航',
          key: 'item-4',
          icon: <Icon iconName="Home" />,
          children: [
            { label: '二级导航', key: 'submenu-item-13' },
            { label: '二级导航', key: 'submenu-item-23' },
            { label: '二级导航', key: 'submenu-item-33' },
          ],
        },
      ],
    },
  ];

  return (
    <div style={{ background: 'var(--bg-1)', padding: '10px' }}>
      <Menu items={IconItems} mode="inline" isCollapsedIcon />
    </div>
  );
};