53 lines
1.4 KiB
TypeScript
Executable File
53 lines
1.4 KiB
TypeScript
Executable File
import { useAuth } from "@web/src/providers/auth-provider";
|
|
import { Menu } from "antd";
|
|
import { useMemo } from "react";
|
|
import { useNavigate, useLocation } from "react-router-dom";
|
|
|
|
export const NavigationMenu = () => {
|
|
const navigate = useNavigate();
|
|
const { isAuthenticated } = useAuth();
|
|
const { pathname } = useLocation();
|
|
|
|
const menuItems = useMemo(() => {
|
|
const baseItems = [
|
|
{ key: "home", path: "/", label: "首页" },
|
|
{ key: "courses", path: "/courses", label: "全部课程" },
|
|
{ key: "path", path: "/path", label: "学习路径" },
|
|
];
|
|
if (!isAuthenticated) {
|
|
return baseItems;
|
|
} else {
|
|
return [
|
|
...baseItems,
|
|
{ key: "my-duty", path: "/my-duty", label: "我创建的" },
|
|
{ key: "my-learning", path: "/my-learning", label: "我学习的" },
|
|
];
|
|
}
|
|
}, [isAuthenticated]);
|
|
|
|
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>
|
|
);
|
|
};
|