front/src/components/AppBar/MainAppBar.tsx

import {
    AppBar,
    Box,
    Button,
    Grid,
    IconButton,
    Link,
    Modal,
    Toolbar,
    Tooltip,
    Typography,
    useMediaQuery,
    useScrollTrigger,
    useTheme
} from "@mui/material";
import { FC, useContext, useState } from "react";
import { Navigate, useLocation, useNavigate, useNavigation } from "react-router-dom";
import { ThemeModeContext, ThemeSchemeContext } from "../../theme";

import DarkIcon from "@mui/icons-material/DarkModeOutlined";
import LightIcon from "@mui/icons-material/LightModeOutlined";
import MenuIcon from "@mui/icons-material/MenuTwoTone";
import { Home } from "@mui/icons-material";

interface HeaderProps {
  onMobile?: boolean;
  window?: () => Window;
}

const MainAppBar: FC<HeaderProps> = ({ onMobile, window }) => {
  const { toggleTheme, themeMode, setThemeMode } = useContext(ThemeModeContext);

  const location = useLocation();

  const [openModal, setOpenModal] = useState(false)
  const handleOpen = () => setOpenModal(true)
  const handleClose = () => setOpenModal(false)

  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 0,
    target: window ? window() : undefined,
  });
  const theme = useTheme();

  const isSxUp = useMediaQuery(theme.breakpoints.up('sm'));

  const navigate = useNavigate()


  const style_modal = {
      position: "absolute" as "absolute",
      top: !isSxUp ? "50%" : "50%",
      left: "50%",
      transform: "translate(-50%, -50%)",
      width: !isSxUp ? "97%" : "auto",
      color: "inherit",
      bgcolor: "background.paper",
      p: !isSxUp ? 4 : 4,
      borderRadius: "35px",
    }

  return (
    <>
      <AppBar position="sticky" elevation={trigger ? 0 : 0}>
        <Toolbar>
          <Grid container spacing={1} alignItems="center">
          <Grid item sx={{ display: "flex", alignItems: "center", alignContent:"center", cursor:"pointer"}} onClick={(e) => navigate('/Home')}>
            <Home sx={{pr: 1.5, fontSize:30}}/>
              <Typography
                color="inherit"
                sx={{ fontWeight: "bold", letterSpacing: 1, fontSize: 20, fontFamily:"monospace"  }}
              >
                AMP Aubay
              </Typography>
            </Grid>
            { isSxUp ? <Grid item sx={{ display: "flex", alignItems: "baseline" }} visibility={"visible"}>
              <Typography
                color="inherit"
                sx={{ fontWeight: "normal", letterSpacing: 0.5, fontSize: 20, fontFamily:"monospace", pl:1}}
              >
                // {location.pathname.replace("/", "")}
              </Typography>
            </Grid> : <Box></Box>
            }
            <Grid item xs></Grid>
            <Grid item>
              <Tooltip title="Switch Theme">
                <IconButton size="large" color="inherit" onClick={toggleTheme}>
                  {themeMode == "light" ? <DarkIcon /> : <LightIcon />}
                </IconButton>
              </Tooltip>
            </Grid>
          </Grid>
          <Button variant="tonal" color="tertiary" onClick={handleOpen}>
            About
          </Button>
          <div>
            <Modal
              open={openModal}
              onClose={handleClose}
              aria-labelledby="modal-modal-title"
              aria-describedby="modal-modal-description"
            >
              <Box sx={style_modal}>
                <Typography
                  id="modal-modal-title"
                  variant="h6"
                  sx={{
                    paddingTop: "10px",
                    fontFamily: "monospace",
                    fontStyle: "italic",
                  }}
                >
                  VST Inference 
                </Typography>

                <Typography
                  id="modal-modal-title"
                  variant="h6"
                  sx={{ paddingTop: "10px", fontFamily: "monospace" }}
                  component="h2"
                >
                  Project contributors
                </Typography>
                <Typography
                  id="modal-modal-title"
                  variant="h6"
                  sx={{ paddingTop: "10px", fontFamily: "monospace" }}
                  component="h2"
                >
                  Application & Model:
                </Typography>
                <Box sx={{ gap: "1px", marginLeft: "10px" }}>
                  <Typography
                    id="modal-modal-description"
                    paragraph
                    sx={{
                      mt: 0,
                      mb: 0,
                      fontSize: "18px",
                      fontFamily: "monospace",
                    }}
                  >
                    - Yann Derré @ UTBM
                  </Typography>
                  <Typography
                    id="modal-modal-description"
                    paragraph
                    sx={{
                      mt: 0,
                      mb: 0,
                      fontSize: "18px",
                      fontFamily: "monospace",
                    }}
                  >
                    - Anselme Canivet @ UTC
                  </Typography>
                </Box>

                <Typography
                  id="modal-modal-title"
                  variant="h6"
                  sx={{ paddingTop: "10px", fontFamily: "monospace" }}
                  component="h2"
                >
                  Extra Support model:
                </Typography>
                <Box sx={{ gap: "1px", marginLeft: "10px" }}>
                  <Link
                    id="modal-modal-description"
                    paragraph
                    
                    sx={{
                      mt: 0,
                      mb: 0,
                      fontSize: "18px",
                      fontFamily: "monospace",
                      cursor:"pointer",
                      color:"black"
                    }}
                    href="https://github.com/crodriguez1a"
                  >
                    Inversynth implementation by Carlos Rodriguez

                  </Link>
                  <Box>

                  </Box>
                  <Link
                    id="modal-modal-description"
                    paragraph
                    sx={{
                      mt: 0,
                      mb: 0,
                      fontSize: "18px",
                      fontFamily: "monospace",
                      cursor:"pointer",
                      color: "black"
                    }}
                    href="https://arxiv.org/pdf/1812.06349.pdf"
                  >
                    Inversynth model by Oren Barkan, David Tsiris, Ori Katz, Noam Koenigstein
                  </Link>
                </Box>

                <Typography
                  id="modal-modal-description"
                  sx={{ mt: 2, fontFamily: "monospace" }}
                >
                </Typography>
              </Box>
            </Modal>
          </div>
        </Toolbar>
      </AppBar>
    </>
  );
};



  
export default MainAppBar;