add

apps/web/src/components/layout/admin/AdminSidebar.tsx

@@ -1,61 +1,58 @@
-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 { useToken } = theme;
 
 type SidebarProps = {
-  routes: CustomRouteObject[];
+	routes: CustomRouteObject[];
 };
 
 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 => ({
+		() =>
-      key: route.path,
+			routes.map((route) => ({
-      icon: route.icon,
+				key: route.path,
-      label: (
+				icon: route.icon,
-        <NavLink
+				label: <NavLink to={route.path}>{route.name}</NavLink>,
-          to={route.path}
+			})),
+		[routes]
+	);
 
-        >
+	return (
-          {route.name}
+		<Sider
-        </NavLink>
+			collapsible
-      ),
+			collapsed={collapsed}
-    }))
+			onCollapse={(value) => setCollapsed(value)}
-    , [routes]);
+			width={150}
-
+			className="h-screen sticky top-0"
-  return (
+			style={{
-    <Sider
+				backgroundColor: token.colorBgContainer,
-      collapsible
+				borderRight: `1px solid ${token.colorBorderSecondary}`,
-      collapsed={collapsed}
+			}}>
-      onCollapse={(value) => setCollapsed(value)}
+			<Menu
-      width={150}
+				theme="light"
-      className="h-screen sticky top-0"
+				mode="inline"
-      style={{
+				selectedKeys={routes
-        backgroundColor: token.colorBgContainer,
+					.filter((route) =>
-        borderRight: `1px solid ${token.colorBorderSecondary}`
+						matches.some((match) =>
-      }}
+							match.pathname.includes(route.path)
-    >
+						)
-      <Menu
+					)
-        theme="light"
+					.map((route) => route.path)}
-        mode="inline"
+				items={menuItems}
-        selectedKeys={routes
+				className="border-r-0"
-          .filter(route => matches.some(match => match.pathname.includes(route.path)))
+				style={{
-          .map(route => route.path)}
+					borderRight: 0,
-
+				}}
-        items={menuItems}
+			/>
-        className="border-r-0"
+		</Sider>
-        style={{
+	);
-          borderRight: 0
-        }}
-      />
-    </Sider>
-  );
 }