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

planner-front/src/components/Menus/AdminMenu/AdminMenu.js

+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

planner-front/src/components/Menus/AnonymousMenu/AnonymousMenu.js

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

planner-front/src/components/Menus/WorkerMenu/WorkerMenu.js

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

planner-front/src/components/UI/AppToolBar/AppToolBar.js

-import {AppBar, Box, Toolbar, Typography, Button} from "@mui/material";
+import {AppBar, Box, Toolbar, Typography} from "@mui/material";
 import {NavLink} from "react-router-dom";
 import {useSelector} from "react-redux";
 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 user = useSelector(state => state.users.user);
 
     return <Box sx={{ flexGrow: 1, mb: "40px" }}>
-        <AppBar position="static">
+        <AppBar position="static"> 
             <Toolbar>
                 <Typography 
                     variant="h4" 
@@ -15,55 +18,17 @@ const AppToolbar = () => {
                     sx={{ flexGrow: 1 }}>
 
                     <NavLink to='/' style={{textDecoration: 'none', color: 'inherit'}}>Task Manager</NavLink>
-                </Typography>
-                <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>
+                </Typography>   
+
+                <HasAccess allowed={!user}>
+                    <AnonymousMenu/>
+                </HasAccess>
+                <HasAccess roles={['user']}>
+                    <WorkerMenu/>
+                </HasAccess>
+                <HasAccess roles={['superuser']}>
+                    <AdminMenu/>
+                </HasAccess>
             </Toolbar>
         </AppBar>
     </Box>

planner-front/src/components/UI/HasAccess/HasAccess.js

@@ -5,4 +5,4 @@ const HasAccess = ({allowed, roles, children}) => {
     return allowed || roles?.includes(user?.role) ? children : null;
 };
 
-export default HasAccess;
+export default HasAccess;
\ No newline at end of file