init: Init React Application

2025-05-29 13:21:33 +03:00
parent 9444939507
commit 17de7e495f
66 changed files with 10425 additions and 0 deletions
--- a/src/entities/navigation/ui/index.tsx
+++ b/src/entities/navigation/ui/index.tsx
@ -0,0 +1,74 @@
+import * as React from "react";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import type { NavigationItem } from "../model";
+import { useNavigate } from "react-router-dom";
+
+interface NavigationItemProps {
+  item: NavigationItem;
+  open: boolean;
+}
+
+export const NavigationItemComponent: React.FC<NavigationItemProps> = ({
+  item,
+  open,
+}) => {
+  const Icon = item.icon;
+  const navigate = useNavigate();
+
+  return (
+    <ListItem
+      onClick={() => navigate(item.path)}
+      disablePadding
+      sx={{ display: "block" }}
+    >
+      <ListItemButton
+        sx={[
+          {
+            minHeight: 48,
+            px: 2.5,
+          },
+          open
+            ? {
+                justifyContent: "initial",
+              }
+            : {
+                justifyContent: "center",
+              },
+        ]}
+      >
+        <ListItemIcon
+          sx={[
+            {
+              minWidth: 0,
+              justifyContent: "center",
+            },
+            open
+              ? {
+                  mr: 3,
+                }
+              : {
+                  mr: "auto",
+                },
+          ]}
+        >
+          <Icon />
+        </ListItemIcon>
+        <ListItemText
+          primary={item.label}
+          sx={[
+            open
+              ? {
+                  opacity: 1,
+                }
+              : {
+                  opacity: 0,
+                },
+          ]}
+        />
+      </ListItemButton>
+    </ListItem>
+  );
+};