Skip to content

Commit

Permalink
fix link
Browse files Browse the repository at this point in the history
  • Loading branch information
appad committed Oct 8, 2024
1 parent bd227ae commit 3e991d1
Showing 1 changed file with 153 additions and 151 deletions.
304 changes: 153 additions & 151 deletions react-frontend/src/components/ResponsiveAppBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,170 +12,172 @@ import Button from "@mui/material/Button";
import Tooltip from "@mui/material/Tooltip";
import MenuItem from "@mui/material/MenuItem";
import ExtensionIcon from "@mui/icons-material/Extension";
import { Link } from "react-router-dom";
import {Link} from "react-router-dom";

const pages: {
title: string;
href: string;
title: string;
href: string;
}[] = [
{
title: "Path Creator",
href: "/path",
},
{
title: "Path Creator",
href: "/path",
}, {
title: "Solver",
href: "/",
},
];
const settings = ["Profile", "Account", "Dashboard", "Logout"];

function ResponsiveAppBar() {
const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
null
);
const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(
null
);
const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
null
);
const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(
null
);

const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElNav(event.currentTarget);
};
const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElUser(event.currentTarget);
};
const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElNav(event.currentTarget);
};
const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElUser(event.currentTarget);
};

const handleCloseNavMenu = () => {
setAnchorElNav(null);
};
const handleCloseNavMenu = () => {
setAnchorElNav(null);
};

const handleCloseUserMenu = () => {
setAnchorElUser(null);
};
const handleCloseUserMenu = () => {
setAnchorElUser(null);
};

return (
<AppBar
position="sticky"
style={{ height: "10vh", display: "flex", justifyContent: "center" }}
>
<Container maxWidth="xl">
<Toolbar disableGutters>
<ExtensionIcon sx={{ display: { xs: "none", md: "flex" }, mr: 1 }} />
<Typography
variant="h6"
noWrap
component="a"
href="/"
sx={{
mr: 2,
display: { xs: "none", md: "flex" },
fontFamily: "monospace",
fontWeight: 700,
letterSpacing: ".3rem",
color: "inherit",
textDecoration: "none",
}}
>
Eternity II
</Typography>
return (
<AppBar
position="sticky"
style={{height: "10vh", display: "flex", justifyContent: "center"}}
>
<Container maxWidth="xl">
<Toolbar disableGutters>
<ExtensionIcon sx={{display: {xs: "none", md: "flex"}, mr: 1}}/>
<Typography
variant="h6"
noWrap
component="a"
sx={{
mr: 2,
display: {xs: "none", md: "flex"},
fontFamily: "monospace",
fontWeight: 700,
letterSpacing: ".3rem",
color: "inherit",
textDecoration: "none",
}}
>
Eternity II
</Typography>

<Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "left",
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
sx={{
display: { xs: "block", md: "none" },
}}
>
{pages.map((page) => (
<MenuItem key={page.title} onClick={handleCloseNavMenu}>
<Typography textAlign="center">{page.title}</Typography>
</MenuItem>
))}
</Menu>
</Box>
<ExtensionIcon sx={{ display: { xs: "flex", md: "none" }, mr: 1 }} />
<Typography
variant="h5"
noWrap
component="a"
href="/"
sx={{
mr: 2,
display: { xs: "flex", md: "none" },
flexGrow: 1,
fontFamily: "monospace",
fontWeight: 700,
letterSpacing: ".3rem",
color: "inherit",
textDecoration: "none",
}}
>
Eternity II
</Typography>
<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
{pages.map((page) => (
<Button
key={page.title}
onClick={handleCloseNavMenu}
sx={{ my: 2, color: "white", display: "block" }}
component={Link}
to={page.href}
>
{page.title}
</Button>
))}
</Box>
<Box sx={{flexGrow: 1, display: {xs: "flex", md: "none"}}}>
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon/>
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "left",
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
sx={{
display: {xs: "block", md: "none"},
}}
>
{pages.map((page) => (
<MenuItem key={page.title} onClick={handleCloseNavMenu}>
<Typography textAlign="center">{page.title}</Typography>
</MenuItem>
))}
</Menu>
</Box>
<ExtensionIcon sx={{display: {xs: "flex", md: "none"}, mr: 1}}/>
<Typography
variant="h5"
noWrap
component="a"
href="/"
sx={{
mr: 2,
display: {xs: "flex", md: "none"},
flexGrow: 1,
fontFamily: "monospace",
fontWeight: 700,
letterSpacing: ".3rem",
color: "inherit",
textDecoration: "none",
}}
>
Eternity II
</Typography>
<Box sx={{flexGrow: 1, display: {xs: "none", md: "flex"}}}>
{pages.map((page) => (
<Button
key={page.title}
onClick={handleCloseNavMenu}
sx={{my: 2, color: "white", display: "block"}}
component={Link}
to={page.href}
>
{page.title}
</Button>
))}
</Box>

<Box sx={{ flexGrow: 0 }}>
<Tooltip title="Open settings">
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
</IconButton>
</Tooltip>
<Menu
sx={{ mt: "45px" }}
id="menu-appbar"
anchorEl={anchorElUser}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
open={Boolean(anchorElUser)}
onClose={handleCloseUserMenu}
>
{settings.map((setting) => (
<MenuItem key={setting} onClick={handleCloseUserMenu}>
<Typography textAlign="center">{setting}</Typography>
</MenuItem>
))}
</Menu>
</Box>
</Toolbar>
</Container>
</AppBar>
);
<Box sx={{flexGrow: 0}}>
<Tooltip title="Open settings">
<IconButton onClick={handleOpenUserMenu} sx={{p: 0}}>
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg"/>
</IconButton>
</Tooltip>
<Menu
sx={{mt: "45px"}}
id="menu-appbar"
anchorEl={anchorElUser}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
open={Boolean(anchorElUser)}
onClose={handleCloseUserMenu}
>
{settings.map((setting) => (
<MenuItem key={setting} onClick={handleCloseUserMenu}>
<Typography textAlign="center">{setting}</Typography>
</MenuItem>
))}
</Menu>
</Box>
</Toolbar>
</Container>
</AppBar>
);
}

export default ResponsiveAppBar;

0 comments on commit 3e991d1

Please sign in to comment.