import './index.css';
import { Outlet } from 'react-router-dom';
import { Menu, Button } from 'antd';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';

export default function Layout() {
  const items = useSelector(({ system }) => system.menus);
  const navigate = useNavigate();
  function selectMenu({ key }) {
    navigate(key);
  }
  return (
    <div className="layout">
      <aside>
        <Button
          type="primary"
          ghost
          style={{ width: 'calc(100% - 4px)', boxSizing: 'border-box' }}
        >
          导航菜单
        </Button>
        <Menu
          defaultSelectedKeys={['/']}
          mode="inline"
          inlineCollapsed={false}
          items={items}
          onClick={selectMenu}
        />
      </aside>
      <main>
        <header></header>
        <div className="main-page">
          <Outlet />
        </div>
        <footer>@copyright 爱扣钉学习项目</footer>
      </main>
    </div>
  );
}