added basic menu to frontend

frontend/src/App.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import './App.css';
 import AuthProvider from "./auth/AuthProvider";
-import {BrowserRouter, Route, Switch} from "react-router-dom";
+import {BrowserRouter, Redirect, Route, Switch} from "react-router-dom";
 import PrivateRoute from "./auth/PrivateRoute";
-import Login from "./components/Login";
+import Login from "./pages/Login";
+import Dashboard from "./pages/Dashboard";
+import MenuBar from "./components/MenuBar";
 
 function App() {
     return (
@@ -14,10 +16,11 @@ function App() {
                         <Login/>
                     </Route>
                     <PrivateRoute path="/">
-                        <h1>Private</h1>
+                        <MenuBar />
+                        <Dashboard />
                     </PrivateRoute>
                     <Route path="/*">
-                        <h1>Test</h1>
+                        <Redirect to={"/login"} />
                     </Route>
                 </Switch>
             </BrowserRouter>

frontend/src/components/MenuBar/index.tsx

@@ -0,0 +1,66 @@
+import {AppBar, IconButton, Menu, MenuItem, Toolbar, Typography} from "@material-ui/core";
+import MenuIcon from '@material-ui/icons/Menu';
+import {FunctionComponent, useState} from "react";
+import {useAuth} from "../../auth/AuthProvider";
+import {AccountCircle} from "@material-ui/icons";
+
+type MenuBarProps = {
+
+}
+
+const MenuBar: FunctionComponent<MenuBarProps> = () => {
+    const { user } = useAuth()
+
+    const [anchorEl, setAnchorEl] = useState<HTMLElement|null>(null)
+    const open = Boolean(anchorEl);
+
+    const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <AppBar position="static">
+            <Toolbar>
+                <IconButton edge="start" color="inherit" aria-label="menu">
+                    <MenuIcon />
+                </IconButton>
+                <Typography variant="h6" style={{flexGrow: 1}}>
+                    News
+                </Typography>
+                <IconButton
+                    aria-label="account of current user"
+                    aria-controls="menu-appbar"
+                    aria-haspopup="true"
+                    onClick={handleMenu}
+                    color="inherit"
+                >
+                    <AccountCircle />
+                </IconButton>
+                <Menu
+                    id="menu-appbar"
+                    anchorEl={anchorEl}
+                    anchorOrigin={{
+                        vertical: 'top',
+                        horizontal: 'right',
+                    }}
+                    keepMounted
+                    transformOrigin={{
+                        vertical: 'top',
+                        horizontal: 'right',
+                    }}
+                    open={open}
+                    onClose={handleClose}
+                >
+                    <MenuItem onClick={handleClose}>Profile</MenuItem>
+                    <MenuItem onClick={handleClose}>My account</MenuItem>
+                </Menu>
+            </Toolbar>
+        </AppBar>
+    )
+}
+
+export default MenuBar

frontend/src/pages/Dashboard/index.tsx

@@ -0,0 +1,14 @@
+import {FunctionComponent} from "react";
+
+type DashboardProps = {
+
+}
+
+const Dashboard: FunctionComponent<DashboardProps> = () => {
+
+    return <>
+        <h1>Dashboard</h1>
+    </>
+}
+
+export default Dashboard