GHHub/src/views/App.jsx

import { Outlet, Link, useNavigation } from "react-router-dom";
import { Breadcrumb, Layout, Menu, ConfigProvider, theme, Dropdown, Space, Row, Col } from 'antd';
import {
  UserOutlined,
  VideoCameraOutlined,
  DownOutlined
} from '@ant-design/icons';
import 'antd/dist/reset.css';

const { Header, Content, Footer, Sider } = Layout;
const items = [
  {
    label: (
      <a target="_blank" rel="noopener noreferrer" href="#">
        Profile
      </a>
    ),
    key: '0',
  },
  {
    label: (
      <a target="_blank" rel="noopener noreferrer" href="#">
        Privacy
      </a>
    ),
    key: '1',
  },
  {
    type: 'divider',
  },
  {
    label: (
      <a target="_blank" rel="noopener noreferrer" href="#">
        Logout
      </a>
    ),
    key: '3',
  },
]
export default function App() {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#00b96b',
        },
        algorithm: theme.defaultAlgorithm,
      }}
    >
      <Layout
        style={{
          minHeight: "100vh",
        }}>
        <Header className="header">
          <Row gutter={{ md: 24 }} justify="end">
            <Col span={22}>
              <div className="logo" />
              <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']} items={
                [
                  { key: 1, label: <Link to="/reservation/newest">Reservation</Link> },
                  { key: 2, label: <Link to="/feedback/list">Feedback</Link> },
                  { key: 3, label: <Link to="/invoice/list">Invoice</Link> }
                ]
              } />
            </Col>
            <Col span={2}>
              <Dropdown
                menu={{
                  items
                }}
              >
                <a onClick={(e) => e.preventDefault()}>
                  <Space>
                    LiaoYijun
                    <DownOutlined />
                  </Space>
                </a>
              </Dropdown>
            </Col>
          </Row>
        </Header>
        <Content
          style={{
            padding: 24,
            margin: 0,
            minHeight: 280,
            background: colorBgContainer,
          }}>
          <Outlet />
        </Content>
        <Footer>
        </Footer>
      </Layout>
    </ConfigProvider>
  );
}