import React, {useContext} from 'react'; import {useHistory} from "react-router"; import {makeStyles} from '@material-ui/core/styles'; import MenuIcon from '@material-ui/icons/Menu'; import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; import { AppBar, Divider, Drawer, FormControl, FormHelperText, IconButton, InputLabel, List, ListItem, ListItemText, NativeSelect, Toolbar, Typography } from "@material-ui/core"; import {Links_List} from "./GlobalConstants"; import {Home} from "@material-ui/icons"; import {BackendContext} from "./App"; const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, menuButton: { marginRight: theme.spacing(2), }, title: { flexGrow: 1, }, drawerHeader: { display: 'flex', alignItems: 'center', padding: theme.spacing(0, 1), // necessary for content to be below app bar ...theme.mixins.toolbar, justifyContent: 'space-between', }, formControl: { margin: theme.spacing(1), minWidth: 120, } })); export default function ButtonAppBar() { const classes = useStyles(); const [anchorEl, setAnchorEl] = React.useState(false); const history = useHistory(); const [backend, dispatch] = useContext(BackendContext); const handleChange = (event: React.ChangeEvent<{ value: string }>) => { dispatch({ type: 'SET_BACKEND', payload: event.target.value }); }; const openMenu = (event: any) => { setAnchorEl(event.currentTarget); }; const closeMenu = () => { setAnchorEl(false); }; const redirectToLink = (link: string) => { closeMenu(); window.open(link); }; const redirectToHome = () => { history.push('/'); }; return (

Helpful Links

{Links_List.map((link, i) => { return (
redirectToLink(link.link)}>
)})}
Facial Recognition Backend Which backend to use
); }