You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.4 KiB
55 lines
1.4 KiB
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>
|
|
);
|
|
}
|