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

add

This commit is contained in:
ditiqi 2025-02-06 19:23:19 +08:00
parent 00fcce7a43
commit eb9eec00d9
1 changed files with 48 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
apps/web/src/components/layout/admin/AdminSidebar.tsx
View File

@ -1,8 +1,8 @@
import { useState, useMemo } from 'react'; import { useState, useMemo } from "react";
import { NavLink, matchPath, useLocation, useMatches } from 'react-router-dom'; import { NavLink, matchPath, useLocation, useMatches } from "react-router-dom";
import { Layout, Menu, theme } from 'antd'; import { Layout, Menu, theme } from "antd";
import type { MenuProps } from 'antd'; import type { MenuProps } from "antd";
import { CustomRouteObject } from '@web/src/routes/types'; import { CustomRouteObject } from "@web/src/routes/types";
const { Sider } = Layout; const { Sider } = Layout;
const { useToken } = theme; const { useToken } = theme;
@ -14,22 +14,17 @@ type SidebarProps = {
export default function AdminSidebar({ routes }: SidebarProps) { export default function AdminSidebar({ routes }: SidebarProps) {
const [collapsed, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(false);
const { token } = useToken(); const { token } = useToken();
let matches = useMatches(); const matches = useMatches();
console.log(matches) console.log(matches);
const menuItems: MenuProps['items'] = useMemo(() => const menuItems: MenuProps["items"] = useMemo(
routes.map(route => ({ () =>
routes.map((route) => ({
key: route.path, key: route.path,
icon: route.icon, icon: route.icon,
label: ( label: <NavLink to={route.path}>{route.name}</NavLink>,
<NavLink })),
to={route.path} [routes]
);
>
{route.name}
</NavLink>
),
}))
, [routes]);
return ( return (
<Sider <Sider
@ -40,20 +35,22 @@ export default function AdminSidebar({ routes }: SidebarProps) {
className="h-screen sticky top-0" className="h-screen sticky top-0"
style={{ style={{
backgroundColor: token.colorBgContainer, backgroundColor: token.colorBgContainer,
borderRight: `1px solid ${token.colorBorderSecondary}` borderRight: `1px solid ${token.colorBorderSecondary}`,
}} }}>
>
<Menu <Menu
theme="light" theme="light"
mode="inline" mode="inline"
selectedKeys={routes selectedKeys={routes
.filter(route => matches.some(match => match.pathname.includes(route.path))) .filter((route) =>
.map(route => route.path)} matches.some((match) =>
match.pathname.includes(route.path)
)
)
.map((route) => route.path)}
items={menuItems} items={menuItems}
className="border-r-0" className="border-r-0"
style={{ style={{
borderRight: 0 borderRight: 0,
}} }}
/> />
</Sider> </Sider>