qiuchenfan
/
origin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
apps/web/src/app/main/layout/NavigationMenu.tsx
View File

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