import { Layout, Menu, Avatar, Button } from 'antd';
import { UserOutlined, SettingOutlined } from '@ant-design/icons';
import { useNavigate, Outlet, useLocation } from 'react-router-dom';
import NavigationMenu from './NavigationMenu';

const { Sider, Content } = Layout;

export default function MainHeader() {
  const navigate = useNavigate();



  return (
    <Layout className="h-screen">
      {/* 左侧导航栏 */}
      <Sider
        width={280}
        className=" flex flex-col"
      >
        {/* 用户头像区域 */}
        <div className="p-6 border-b">
          <div className="relative group flex justify-center">
            <Avatar
              size={120}
              icon={<UserOutlined />}
              className=" transition-all duration-300"
            />
            <Button
              type="text"
              icon={<SettingOutlined  />}
              className="!absolute bottom-0 right-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
              onClick={() => navigate('/profile')}
            />
          </div>
        </div>
        <NavigationMenu></NavigationMenu>
      </Sider>
      {/* 新增可滚动内容区域 */}
      <Layout className="flex-1">
        <Content className="overflow-auto">
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
}