38 lines
981 B
TypeScript
Executable File
38 lines
981 B
TypeScript
Executable File
import { Menu } from "antd";
|
|
import { useNavigate, useLocation } from "react-router-dom";
|
|
|
|
const menuItems = [
|
|
{ key: "home", path: "/", label: "首页" },
|
|
{ key: "courses", path: "/courses", label: "全部课程" },
|
|
{ key: "paths", path: "/paths", label: "学习路径" },
|
|
];
|
|
|
|
export const NavigationMenu = () => {
|
|
const navigate = useNavigate();
|
|
const { pathname } = useLocation();
|
|
const selectedKey =
|
|
menuItems.find((item) => item.path === pathname)?.key || "";
|
|
return (
|
|
<Menu
|
|
mode="horizontal"
|
|
className="border-none font-medium"
|
|
selectedKeys={[selectedKey]}
|
|
onClick={({ key }) => {
|
|
const selectedItem = menuItems.find((item) => item.key === key);
|
|
if (selectedItem) navigate(selectedItem.path);
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth",
|
|
});
|
|
}}>
|
|
{menuItems.map(({ key, label }) => (
|
|
<Menu.Item
|
|
key={key}
|
|
className="text-gray-600 hover:text-blue-600">
|
|
{label}
|
|
</Menu.Item>
|
|
))}
|
|
</Menu>
|
|
);
|
|
};
|