Adding a Navigation Bar and Routing with React-Router-Dom

import React, {useState} from "react";
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import {AccountCircle} from "@mui/icons-material";
import makeStyles from "@mui/styles/makeStyles";

const useStyles = makeStyles({
  root: {
    borderBottomRightRadius: "10%",
    borderBottomLeftRadius: "10%",
  },
  title: {
    fontSize: 14,
  },
});

export const SmallNavBar = () => {
  const classes = useStyles();
  const [auth, setAuth] = useState(false);

  return (
    <AppBar position="sticky" className={classes.root} enableColorOnDark>
      <Toolbar>
        <IconButton
          size="large"
          edge="start"
          color="inherit"
          aria-label="menu"
          sx={{mr: 2}}
        >
          <MenuIcon/>
        </IconButton>
        <Typography variant="h6" component="div" sx={{flexGrow: 1}}>
          My Money Management
        </Typography>
        {auth ? (
            <div>
              <IconButton
                size="large"
                aria-label="account of current user"
                aria-controls="menu-appbar"
                aria-haspopup="true"
                color="inherit"
              >
                <AccountCircle/>
              </IconButton>
            </div>
          ) :
          <Button color="inherit">Login</Button>
        }
      </Toolbar>
    </AppBar>
  )
}

  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

<IconButton
          size="large"
          edge="start"
          color="inherit"
          aria-label="menu"
          sx={{mr: 2}}
          onClick={handleClick}
        >
          <MenuIcon/>
        </IconButton>
        <Menu
          id="basic-menu"
          anchorEl={anchorEl}
          open={open}
          onClose={handleClose}
          MenuListProps={{
            'aria-labelledby': 'basic-button',
          }}
        >
          <MenuItem onClick={handleClose}>Home</MenuItem>
          <MenuItem onClick={handleClose}>Accounts</MenuItem>
          <MenuItem onClick={handleClose}>Stocks</MenuItem>
        </Menu>

import React from "react";

export const StocksDisplay = () => {
  return (<div>Stocks page!</div>)
}

import React from "react";

export const HomePage = () => {
  return (<div>Welcome to the home page!</div>)
}

import Grid from "@mui/material/Grid";
import React from "react";
import {BrowserRouter as Router, Route, Switch, Redirect} from "react-router-dom";
import AccountDisplay from "../assets/accounts/AccountDisplay";
import { StocksDisplay } from "../assets/stocks/StocksDisplay";
import { HomePage } from "../general/HomePage";
import {SmallNavBar} from "./SmallNavBar";

function ApplicationRouter() {
    return (
        <Router>
            <SmallNavBar/>
        <Grid item xs={12}
    md={10}
    lg={9}
    xl={8}
    style={{margin: "auto"}}>

    <Switch>
        <Route exact path="/"> <Redirect to="/home" />
        </Route>
    {/*<Route path="/login" component={LoginPage}/>*/}
    <Route path="/accounts" component={AccountDisplay}/>
    <Route path="/stocks" component={StocksDisplay}/>
    <Route path='/home'  component={HomePage}/>
    </Switch>
    </Grid>
    </Router>
)
}

export default ApplicationRouter;

import Grid from '@mui/material/Grid';
import React from 'react';
import './App.css';
import AccountDisplay from "./assets/accounts/AccountDisplay";
import ApplicationRouter from './routing/ApplicationRouter';
import {SmallNavBar} from "./routing/SmallNavBar";

function App() {
  return (
    <div className="App">
      <ApplicationRouter />
    </div>
  );
}

export default App;

          <Link to="/home" className={classes.link}><MenuItem onClick={handleClose}>Home</MenuItem></Link>
          <Link to="/accounts" className={classes.link}><MenuItem onClick={handleClose}>Accounts</MenuItem></Link>
          <Link to="/stocks" className={classes.link}><MenuItem onClick={handleClose}>Stocks</MenuItem></Link>

  link: {
    textDecoration: 'none',
    display: 'block',
    color: 'black'
  },

<Route path="*" component={NotFoundPage}/>

import React from "react";
import ostrich from './../static/images/notfound/ostrich.png';
import {NotFoundItem} from "./NotFoundItem";
import dog from './../static/images/notfound/dog.png';
import map from './../static/images/notfound/map.png';
import ghost from './../static/images/notfound/ghost.png';


export const NotFoundPage = () => {

  const key = Math.floor(Math.random() * 4);

  return (

    <div>
      {key === 0 && <NotFoundItem image={ostrich}
                                  title={'This Page is Buried in the Sand'}
                                  text={'You have never seen an ostrich head. Whenever you’re around it seems ostriches are avoiding your gaze. You came on ' +
                                  'this trip specifically to see an ostrich head, but here is this ostrich right in front of you, head invisible. You may never see an ostrich head. '}/>}
      {key === 1 && <NotFoundItem image={dog}
                                  title={'A dog ate this page!'}
                                  text={'Your dog is cute but honestly a menace. Where are my shoes? Where is my graduation certificate? Where is the chocolate cake I baked for my Aunt’s birthday? ' +
                                  'And why did you take your dog to the vet on that same Thursday?!'}/>}
      {key === 2 && <NotFoundItem image={ghost}
                                  title={'This Page is a Ghost'}
                                  text={'Once alive and now dead, this ghost appears to have some unfinished business. Could it be with you? Or the treasure hidden under the floorboards ' +
                                  'of the old mansion in the hills that may never reach its rightful owner, a compassionate school teacher in Brooklyn.'}/>}
      {key === 3 && <NotFoundItem image={map}
                                  title={'This Page is Not on the Map'}
                                  text={'You told your friends you weren’t bringing your phone, to try and experience what travel was like back in the day. You bought a map and a bottle of water and carried your camera' +
                                  ' for the money shot. But the map was from 2005 and the landscape had changed. So here you are, in the middle of a large field, ' +
                                  'that the map continues to claim is a local grocer.'}/>}
    </div>
  )
}

import Typography from "@mui/material/Typography";
import {makeStyles} from "@mui/styles";
import React from "react";
import {Link} from "react-router-dom";

type Props = {
  image: any,
  title: string,
  text: string
}

const useStyles = makeStyles({
  link: {
    textDecoration: 'none',
    display: 'block',
    color: 'black'
  },
});

export const NotFoundItem = ({image, title, text}: Props) => {
  const classes = useStyles();

  return (
    <div>
      <div>
        <img style={{maxHeight: "600px", maxWidth: "60%"}} src={image} alt={"Image for not found page"}/>
      </div>
      <div>
        <Typography variant="h3" component="div" sx={{flexGrow: 1}}>
          {title}
        </Typography>
      </div>
      {<Link to="/home" className={classes.link}>{text} You can, however, go back to the homepage here.</Link>}
    </div>
  )
}