Commit 6fc542a3 authored by Ermolaev Timur's avatar Ermolaev Timur

#13 Реализовал разные меню в хедере для разных ролей пользователей

parent d1decf4e
import {Button} from "@mui/material";
import {NavLink} from "react-router-dom";
const AdminMenu = () => {
return <>
<Button
component={NavLink}
to="/week"
color="inherit"
size="large"
>
Неделя
</Button>
<Button
component={NavLink}
to="/month"
color="inherit"
size="large"
>
Месяц
</Button>
<Button
component={NavLink}
to="/my-tasks"
color="inherit"
size="large"
>
Мои задачи
</Button>
<Button
component={NavLink}
to="/workers-tasks"
color="inherit"
size="large"
>
Задачи сотрудников
</Button>
<Button
component={NavLink}
to="/sign-up"
color="inherit"
size="large"
>
Создать сотрудника
</Button>
<Button
component={NavLink}
to="/profile/test"
color="inherit"
size="large"
>
Профиль
</Button>
</>
};
export default AdminMenu;
\ No newline at end of file
import {Button} from "@mui/material";
import {NavLink} from "react-router-dom";
const AnonymousMenu = () => {
return <>
<Button
component={NavLink}
color="inherit"
to="/log-in"
>
Вход
</Button>
</>
};
export default AnonymousMenu;
import {Button} from "@mui/material";
import {NavLink} from "react-router-dom";
const WorkerMenu = ({user}) => {
return <>
<Button
component={NavLink}
to="/week"
color="inherit"
size="large"
>
Неделя
</Button>
<Button
component={NavLink}
to="/month"
color="inherit"
size="large"
>
Месяц
</Button>
<Button
component={NavLink}
to="/my-tasks"
color="inherit"
size="large"
>
Мои задачи
</Button>
<Button
component={NavLink}
to="/profile/test"
color="inherit"
size="large"
>
Профиль
</Button>
</>
};
export default WorkerMenu;
import {AppBar, Box, Toolbar, Typography, Button} from "@mui/material"; import {AppBar, Box, Toolbar, Typography} from "@mui/material";
import {NavLink} from "react-router-dom"; import {NavLink} from "react-router-dom";
import {useSelector} from "react-redux"; import {useSelector} from "react-redux";
import HasAccess from "../HasAccess/HasAccess"; import HasAccess from "../HasAccess/HasAccess";
import AnonymousMenu from "../../Menus/AnonymousMenu/AnonymousMenu";
import WorkerMenu from "../../Menus/WorkerMenu/WorkerMenu";
import AdminMenu from "../../Menus/AdminMenu/AdminMenu";
const AppToolbar = () => { const AppToolbar = () => {
const user = useSelector(state => state.users.user); const user = useSelector(state => state.users.user);
...@@ -16,54 +19,16 @@ const AppToolbar = () => { ...@@ -16,54 +19,16 @@ const AppToolbar = () => {
<NavLink to='/' style={{textDecoration: 'none', color: 'inherit'}}>Task Manager</NavLink> <NavLink to='/' style={{textDecoration: 'none', color: 'inherit'}}>Task Manager</NavLink>
</Typography> </Typography>
<Button
component={NavLink} <HasAccess allowed={!user}>
to="/week" <AnonymousMenu/>
color="inherit" </HasAccess>
size="large" <HasAccess roles={['user']}>
> <WorkerMenu/>
Неделя </HasAccess>
</Button> <HasAccess roles={['superuser']}>
<Button <AdminMenu/>
component={NavLink} </HasAccess>
to="/month"
color="inherit"
size="large"
>
Месяц
</Button>
<Button
component={NavLink}
to="/my-tasks"
color="inherit"
size="large"
>
Мои задачи
</Button>
<Button
component={NavLink}
to="/workers-tasks"
color="inherit"
size="large"
>
Задачи сотрудников
</Button>
<Button
component={NavLink}
to="/sign-up"
color="inherit"
size="large"
>
Создать сотрудника
</Button>
<Button
component={NavLink}
to="/profile/test"
color="inherit"
size="large"
>
Профиль
</Button>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
</Box> </Box>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment