add
This commit is contained in:
parent
9100ffffcb
commit
6b699a4092
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue