This commit is contained in:
ditiqi 2025-02-25 22:04:17 +08:00
parent 9100ffffcb
commit 6b699a4092
1 changed files with 32 additions and 26 deletions

View File

@ -1,31 +1,37 @@
import { Menu } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
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: '学习路径' }
{ 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);
}}
>
{menuItems.map(({ key, label }) => (
<Menu.Item key={key} className="text-gray-600 hover:text-blue-600">
{label}
</Menu.Item>
))}
</Menu>
);
};
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>
);
};