added basic menu to frontend

This commit is contained in:
overflowerror 2021-08-15 17:27:03 +02:00
parent e9a923bd9a
commit 0dee21da83
4 changed files with 87 additions and 4 deletions

View file

@ -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>

View file

@ -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

View file

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