init: Init React Application
This commit is contained in:
1
src/entities/index.ts
Normal file
1
src/entities/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from "./navigation";
|
2
src/entities/navigation/index.ts
Normal file
2
src/entities/navigation/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from "./ui";
|
||||
export * from "./model";
|
10
src/entities/navigation/model/index.ts
Normal file
10
src/entities/navigation/model/index.ts
Normal file
@ -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";
|
74
src/entities/navigation/ui/index.tsx
Normal file
74
src/entities/navigation/ui/index.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
Reference in New Issue
Block a user