mirror of
https://github.com/sigmasternchen/threadule
synced 2025-03-15 08:09:01 +00:00
added basic menu to frontend
This commit is contained in:
parent
e9a923bd9a
commit
0dee21da83
4 changed files with 87 additions and 4 deletions
|
@ -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>
|
||||
|
|
66
frontend/src/components/MenuBar/index.tsx
Normal file
66
frontend/src/components/MenuBar/index.tsx
Normal 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
|
14
frontend/src/pages/Dashboard/index.tsx
Normal file
14
frontend/src/pages/Dashboard/index.tsx
Normal file
|
@ -0,0 +1,14 @@
|
|||
import {FunctionComponent} from "react";
|
||||
|
||||
type DashboardProps = {
|
||||
|
||||
}
|
||||
|
||||
const Dashboard: FunctionComponent<DashboardProps> = () => {
|
||||
|
||||
return <>
|
||||
<h1>Dashboard</h1>
|
||||
</>
|
||||
}
|
||||
|
||||
export default Dashboard
|
Loading…
Reference in a new issue