feat: 初始提交

src/web/components/Sidebar/index.tsx

@@ -0,0 +1,53 @@
+import { useLocation, useNavigate } from "react-router";
+import { ChevronLeftIcon, ChevronRightIcon } from "tdesign-icons-react";
+import { Button, Menu } from "tdesign-react";
+
+import { MENU_ITEMS } from "../../menu";
+
+const { MenuItem } = Menu;
+
+interface SidebarProps {
+  collapsed: boolean;
+  onToggleCollapsed: () => void;
+}
+
+export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const currentPath = location.pathname;
+  const currentItem = MENU_ITEMS.find((item) => item.path === currentPath);
+  const activeValue = currentItem?.value ?? "";
+
+  const handleMenuChange = (value: number | string) => {
+    const item = MENU_ITEMS.find((item) => item.value === value);
+    if (item) {
+      void navigate(item.path);
+    }
+  };
+
+  return (
+    <Menu
+      className="app-sidebar-menu"
+      collapsed={collapsed}
+      onChange={handleMenuChange}
+      operations={
+        <Button
+          className="app-sidebar-collapse-btn"
+          icon={collapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+          onClick={onToggleCollapsed}
+          shape="square"
+          variant="text"
+        />
+      }
+      value={activeValue}
+      width={collapsed ? "64px" : "232px"}
+    >
+      {MENU_ITEMS.map((item) => (
+        <MenuItem icon={item.icon} key={item.value} value={item.value}>
+          {item.label}
+        </MenuItem>
+      ))}
+    </Menu>
+  );
+}