ссылки в левом меню

This commit is contained in:
Nikolai 2022-10-01 17:06:54 +03:00
parent fa15d37dd9
commit e7edfd2cc0
6 changed files with 37 additions and 21 deletions

2
package-lock.json generated

@ -29,7 +29,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-scripts": "^5.0.1",
"styled-components": "^5.3.5",
"typescript": "^4.8.2",
"web-vitals": "^2.1.4",

@ -24,7 +24,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-scripts": "^5.0.1",
"styled-components": "^5.3.5",
"typescript": "^4.8.2",
"web-vitals": "^2.1.4",

@ -31,8 +31,8 @@ const ModalMini = ({open, variant, close}: MWProps ) => {
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "30%",
height: "25%",
width: "350px",
height: "220px",
bgcolor: theme.palette.menu.main,
boxShadow: 24,
color: theme.palette.secondary.main,

@ -1,5 +1,6 @@
import * as React from "react";
import { Box } from "@mui/material";
import { useNavigate } from "react-router-dom";
import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined';
import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
@ -13,6 +14,11 @@ import theme from "../../../theme";
const Menu: React.FC = () => {
const navigate = useNavigate();
const pages = [ null, "users", "entities", "tariffs", "discounts", "promocode", null, null, "support" ];
const changePage = (page:number) => { navigate(`/${pages[ page ]}`); }
return (
<React.Fragment>
<Box sx={{
@ -20,7 +26,7 @@ const Menu: React.FC = () => {
width: "96px",
height: "100vh",
borderRight: "1px solid #45494c",
overflow: "hidden"
overflow: "auto"
}}>
<Box sx={{
width: "100%",
@ -55,7 +61,8 @@ const Menu: React.FC = () => {
<PersonOutlineOutlinedIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}} />
}}
onClick={ () => changePage( 1 ) } />
</Box>
<Box sx={{
width: "100%",
@ -69,7 +76,8 @@ const Menu: React.FC = () => {
<SettingsOutlinedIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}} />
}}
onClick={ () => changePage( 2 ) } />
</Box>
<Box sx={{
width: "100%",
@ -83,7 +91,8 @@ const Menu: React.FC = () => {
<BathtubOutlinedIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}} />
}}
onClick={ () => changePage( 3 ) } />
</Box>
<Box sx={{
width: "100%",
@ -97,7 +106,8 @@ const Menu: React.FC = () => {
<AddPhotoAlternateOutlinedIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}} />
}}
onClick={ () => changePage( 4 ) } />
</Box>
<Box sx={{
width: "100%",
@ -111,7 +121,8 @@ const Menu: React.FC = () => {
<NaturePeopleOutlinedIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}} />
}}
onClick={ () => changePage( 5 ) } />
</Box>
<Box sx={{
width: "100%",
@ -125,7 +136,8 @@ const Menu: React.FC = () => {
<SettingsIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}} />
}}
onClick={ () => changePage( 6 ) } />
</Box>
<Box sx={{
width: "100%",
@ -138,7 +150,8 @@ const Menu: React.FC = () => {
}}>
<CameraIcon sx={{
transform: "scale(1.2)"
}} />
}}
onClick={ () => changePage( 7 ) } />
</Box>
<Box sx={{
width: "100%",
@ -152,7 +165,8 @@ const Menu: React.FC = () => {
<HeadsetMicOutlinedIcon sx={{
color: theme.palette.golden.main,
transform: "scale(1.2)"
}}/>
}}
onClick={ () => changePage( 8 ) } />
</Box>
</Box>

@ -85,8 +85,8 @@ const ModalEntities = ({open}: MWProps ) => {
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "72%",
height: "60%",
width: "980px",
height: "480px",
bgcolor: theme.palette.menu.main,
boxShadow: 24,
color: theme.palette.secondary.main,
@ -153,8 +153,9 @@ const ModalEntities = ({open}: MWProps ) => {
disableSelectionOnClick
experimentalFeatures={{ newEditingApi: true }}
sx={{
width: "700px",
height: "400px",
width: "720px",
height: "350px",
overflowY: "auto",
color: theme.palette.secondary.main,
"& .MuiDataGrid-iconSeparator": {
display: "none"

@ -85,8 +85,8 @@ const ModalUser = ({open}: MWProps ) => {
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "72%",
height: "60%",
width: "980px",
height: "480px",
bgcolor: theme.palette.menu.main,
boxShadow: 24,
color: theme.palette.secondary.main,
@ -153,9 +153,10 @@ const ModalUser = ({open}: MWProps ) => {
disableSelectionOnClick
experimentalFeatures={{ newEditingApi: true }}
sx={{
width: "700px",
height: "400px",
color: theme.palette.secondary.main,
width: "720px",
height: "350px",
overflowY: "auto",
"& .MuiDataGrid-iconSeparator": {
display: "none"
},