GHHub/src/views/App.jsx

import { Outlet, Link, useHref, useNavigate, NavLink } from "react-router-dom";
import { useEffect } from "react";
import { observer } from "mobx-react";
import { toJS } from "mobx";
import { Layout, Menu, ConfigProvider, theme, Dropdown, Space, Row, Col, Badge, Typography, Divider, App as AntApp } from "antd";
import { DownOutlined } from "@ant-design/icons";
import "antd/dist/reset.css";
import AppLogo from "@/assets/logo-gh.png";
import { isEmpty } from "@/utils/commons";
import { useStore } from "@/stores/StoreContext.js";

const { Header, Content, Footer } = Layout;
const { Title } = Typography;

const items = [
	{
		label: <Link to="/account/change-password">Change password</Link>,
		key: "0",
	},
	{
		label: <Link to="/account/profile">Profile</Link>,
		key: "1",
	},
	{
		type: "divider",
	},
	{
		label: <Link to="/login">Logout</Link>,
		key: "3",
	},
];

function App() {
	const { authStore, noticeStore } = useStore();
  const { login } = authStore;
	const { noticeUnRead } = noticeStore;
	const href = useHref();
  const loginToken = toJS(login).token;
  const navigate = useNavigate();
	useEffect(() => {
		// Check location
		console.info("href: " + href + '; login.token: ' + loginToken);
    if (href !== '/login' && isEmpty(loginToken)) {
        // navigate('/login');
    }
	}, [href]);

	const splitPath = href.split("/");
	let defaultPath = "reservation";

	if (splitPath.length > 1) {
		defaultPath = splitPath[1];
	}

	const {
		token: { colorBgContainer },
	} = theme.useToken();

	return (
		<ConfigProvider
			theme={{
				token: {
					colorPrimary: "#00b96b",
				},
				algorithm: theme.defaultAlgorithm,
			}}>
			<AntApp>
				<Layout
					style={{
						minHeight: "100vh",
					}}>
					<Header className="header" style={{ position: "sticky", top: 0, zIndex: 1, width: "100%" }}>
						<Row gutter={{ md: 24 }} justify="end" align="middle">
							<Col span={16}>
								<NavLink to="/">
									<img src={AppLogo} className="logo" alt="App logo" />
								</NavLink>
								<Menu
									theme="dark"
									mode="horizontal"
									selectedKeys={[defaultPath]}
									items={[
										{ key: "reservation", label: <Link to="/reservation/newest">Reservation</Link> },
										{ key: "invoice", label: <Link to="/invoice">Invoice</Link> },
										{ key: "feedback", label: <Link to="/feedback">Feedback</Link> },
										{
											key: "notice",
											label: (
												<Link to="/notice">
													Notice
													{noticeUnRead ? <Badge dot /> : ""}
												</Link>
											),
										},
									]}
								/>
							</Col>
							<Col span={4}>
								<Title level={3} style={{ color: "white", marginBottom: "0", display: "flex", justifyContent: "end" }}>
									{authStore.login.travelAgencyName}
								</Title>
							</Col>
							<Col span={4}>
								<Dropdown
									menu={{
										items,
									}}>
									<a onClick={e => e.preventDefault()}>
										<Space>
											{authStore.login.username}
											<DownOutlined />
										</Space>
									</a>
								</Dropdown>
							</Col>
						</Row>
					</Header>

					<Content
						style={{
							padding: 24,
							margin: 0,
							minHeight: 280,
							background: colorBgContainer,
						}}>
						<Outlet />
					</Content>
					<Footer></Footer>
				</Layout>
			</AntApp>
		</ConfigProvider>
	);
}

export default observer(App);