31 lines
1.0 KiB
TypeScript
31 lines
1.0 KiB
TypeScript
|
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);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{menuItems.map(({ key, label }) => (
|
||
|
|
<Menu.Item key={key} className="text-gray-600 hover:text-blue-600">
|
||
|
|
{label}
|
||
|
|
</Menu.Item>
|
||
|
|
))}
|
||
|
|
</Menu>
|
||
|
|
);
|
||
|
|
};
|