Outline/src/components/SideMenu.tsx

import type { MenuProps } from "antd";
import { Menu } from "antd";
import icon_logo from "../assets/icon_logo.svg";
import icon_measure from "../assets/menu/icon_measure.svg";
import { useNavigate, useLocation } from "react-router-dom";
import "./SideMenu.scss";

type MenuItem = Required<MenuProps>["items"][number];

const items: MenuItem[] = [
	{
		key: "measure",
		label: "测量",
		icon: <img src={icon_measure} alt="" />,
		children: [
			{
				key: "/measure/config",
				label: "新测量",
			},
			{
				key: "/measure/detail",
				label: "测量记录",
			}
		],
	},
];

export default function SideMenu() {
	const navigate = useNavigate();
	const location = useLocation();
	const key =
		location.pathname === "/measure/detail"
			? "/measure/detail"
			: location.pathname.startsWith("/measure")
				? "/measure/config"
				: location.pathname;
	const onClick: MenuProps["onClick"] = e => {
		navigate(e.key);
	};
	return (
		<div className="h-[100vh] bg-primary flex flex-col">
			<img src={icon_logo} alt="" className="w-[120px] block mx-auto py-4 " />
			<Menu
				className="side-menu"
				onClick={onClick}
				style={{ width: "100%", backgroundColor: "transparent", color: "#fff" }}
				defaultOpenKeys={["measure"]}
				selectedKeys={[key]}
				mode="inline"
				items={items}
			/>
			<p className="text-white/[0.7] text-center mt-auto mb-4 text-lg">V1.0</p>
		</div>
	);
}