init: Init React Application

src/entities/index.ts

@@ -0,0 +1 @@
+export * from "./navigation";

src/entities/navigation/index.ts

@@ -0,0 +1,2 @@
+export * from "./ui";
+export * from "./model";

src/entities/navigation/model/index.ts

@@ -0,0 +1,10 @@
+import { LucideIcon } from "lucide-react";
+
+export interface NavigationItem {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+  path: string;
+}
+
+export type NavigationSection = "primary" | "secondary";

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>
+  );
+};