#13 Добавил хедер и navigation меню внутри

planner-front/src/App.js

 import {Routes, Route, Outlet, Navigate, BrowserRouter} from "react-router-dom";
 import {Container} from "@mui/material";
 import {useSelector} from "react-redux";
+import AppToolbar from "./components/UI/AppToolBar/AppToolBar";
 
 
 const App = () => {
@@ -9,7 +10,7 @@ const App = () => {
       <Routes>
           <Route element={
             <>
-              <span>header</span>
+              <AppToolbar/>
               <main>
                   <Container>
                       <Outlet/>
@@ -20,8 +21,8 @@ const App = () => {
             <Route path={"/"} element={<h1>week page</h1>}/>
             <Route path={"/week"} element={<h1>week page</h1>}/>
             <Route path={"/month"} element={<h1>month page</h1>}/>
-            <Route path={"/mytasks"} element={<h1>my tasks page</h1>}/>
-            <Route path={"/workerstasks"} element={<h1>workers tasks page</h1>}/>
+            <Route path={"/my-tasks"} element={<h1>my tasks page</h1>}/>
+            <Route path={"/workers-tasks"} element={<h1>workers tasks page</h1>}/>
             <Route path={"/profile/:id"} element={<h1>profile page</h1>}/>
             <Route path={"/sign-up"} element={<h1>sign-up page</h1>}/>
             <Route path={"/log-in"} element={<h1>log-in page</h1>}/>

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

+import {AppBar, Box, Toolbar, Typography, Button} from "@mui/material";
+import {NavLink} from "react-router-dom";
+import {useSelector} from "react-redux";
+import HasAccess from "../HasAccess/HasAccess";
+
+const AppToolbar = () => {
+    const user = useSelector(state => state.users.user);
+
+    return <Box sx={{ flexGrow: 1, mb: "40px" }}>
+        <AppBar position="static">
+            <Toolbar>
+                <Typography 
+                    variant="h4" 
+                    component="div" 
+                    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>
+            </Toolbar>
+        </AppBar>
+    </Box>
+};
+
+export default AppToolbar;

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

+import {useSelector} from "react-redux";
+
+const HasAccess = ({allowed, roles, children}) => {
+    const user = useSelector(state => state.users?.user);
+    return allowed || roles?.includes(user?.role) ? children : null;
+};
+
+export default HasAccess;