updated react-openapi

2026-06-17 21:03:08 +05:30
parent cd89eb4c88
commit 0a668cf98d
64 changed files with 2412 additions and 2921 deletions
--- a/react-openapi/src/components/SideMenu.tsx
+++ b/react-openapi/src/components/SideMenu.tsx
@@ -0,0 +1,110 @@
+import React from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import {
+  Drawer,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Toolbar,
+  Typography,
+  Box,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import CircleIcon from "@mui/icons-material/Circle";
+import type { ResourceConfig } from "../types";
+
+interface SideMenuProps {
+  resources: ResourceConfig[];
+  basePath: string;
+  mobileOpen: boolean;
+  onClose: () => void;
+}
+
+const drawerWidth = 260;
+
+export function SideMenu({ resources, basePath, mobileOpen, onClose }: SideMenuProps) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+
+  const colors = [
+    "#6366f1", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6",
+    "#ec4899", "#14b8a6", "#f97316", "#06b6d4", "#84cc16",
+  ];
+
+  const content = (
+    <Box>
+      <Toolbar>
+        <Typography variant="h6" fontWeight={700} noWrap>
+          Admin Panel
+        </Typography>
+      </Toolbar>
+      <List sx={{ px: 1 }}>
+        {resources.map((r, i) => {
+          const listPath = `${basePath}/${r.name}`;
+          const active = location.pathname.startsWith(listPath);
+          return (
+            <ListItemButton
+              key={r.name}
+              selected={active}
+              onClick={() => {
+                navigate(listPath);
+                if (isMobile) onClose();
+              }}
+              sx={{
+                borderRadius: 2,
+                mb: 0.5,
+                "&.Mui-selected": {
+                  bgcolor: `${colors[i % colors.length]}15`,
+                  "&:hover": { bgcolor: `${colors[i % colors.length]}20` },
+                },
+              }}
+            >
+              <ListItemIcon sx={{ minWidth: 36 }}>
+                <CircleIcon sx={{ color: colors[i % colors.length], fontSize: 12 }} />
+              </ListItemIcon>
+              <ListItemText
+                primary={r.schemaName}
+                primaryTypographyProps={{ fontWeight: active ? 700 : 500, fontSize: 14 }}
+              />
+            </ListItemButton>
+          );
+        })}
+      </List>
+    </Box>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer
+        variant="temporary"
+        open={mobileOpen}
+        onClose={onClose}
+        ModalProps={{ keepMounted: true }}
+        sx={{
+          "& .MuiDrawer-paper": { boxSizing: "border-box", width: drawerWidth },
+        }}
+      >
+        {content}
+      </Drawer>
+    );
+  }
+
+  return (
+    <Drawer
+      variant="permanent"
+      sx={{
+        width: drawerWidth,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": { width: drawerWidth, boxSizing: "border-box" },
+      }}
+    >
+      {content}
+    </Drawer>
+  );
+}
+
+export { drawerWidth };