import { Button } from 'antd'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons';
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { setCollapsed } from '../../stores/sidebar';

export default function Navbar() {
  // 获取状态
  const collapsed = useSelector((store: any) => store.sidebar)
  // 通过dispatch派发事件
  const dispatch = useDispatch()
  return (
    <>
      <Button
        type="text"
        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        onClick={() => {dispatch(setCollapsed())}}
        style={{
          fontSize: '16px',
          width: 64,
          height: 64,
        }}
      />
    </>
  )
}