Skip to content

Instantly share code, notes, and snippets.

@Priceless-P
Last active Apr 24, 2022
Embed
What would you like to do?
import {AppBar, Toolbar, Typography, makeStyles, Button, IconButton, Drawer, Link,
MenuItem,} from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";
import React, { useState, useEffect } from "react";
import { Link as RouterLink } from "react-router-dom";
const linkDetails = [
{
displayName: "Quiz",
href: "/Quiz",
},
{
displayName: "Learn",
href: "/Learn",
},
];
const useStyles = makeStyles(() => ({
NavBar: {
backgroundColor: "#400CCC",
paddingRight: "79px",
paddingLeft: "5px",
marginBottom:"100px",
"@media (max-width: 900px)": {
paddingLeft: 0,
},
},
logoText: {
fontFamily: "Dancing Script, cursive",
fontWeight: 500,
color: "#FFFEFE",
textAlign: "left",
},
menuButton: {
fontFamily: "Open Sans, sans-serif",
fontWeight: 700,
size: "18px",
marginLeft: "38px",
},
toolbar: {
display: "flex",
justifyContent: "space-between",
},
drawerContainer: {
padding: "20px 30px",
},
}));
export default function ResponsiveAppBar() {
const { NavBar, logoText, menuButton, toolbar, drawerContainer } = useStyles();
const [state, setState] = useState({
mobileView: false,
drawerOpen: false,
});
const { mobileView, drawerOpen } = state;
useEffect(() => {
const setResponsiveness = () => {
return window.innerWidth < 900
? setState((prevState) => ({ ...prevState, mobileView: true }))
: setState((prevState) => ({ ...prevState, mobileView: false }));
};
setResponsiveness();
window.addEventListener("resize", () => setResponsiveness());
return () => {
window.removeEventListener("resize", () => setResponsiveness());
};
}, []);
const desktopView = () => {
return (
<Toolbar className={toolbar}>
{EarthWonders}
<div>{getMenuButtons()}</div>
</Toolbar>
);
};
const viewMobile = () => {
const handleDrawerOpen = () =>
setState((prevState) => ({ ...prevState, drawerOpen: true }));
const handleDrawerClose = () =>
setState((prevState) => ({ ...prevState, drawerOpen: false }));
return (
<Toolbar>
<IconButton
{...{
edge: "start",
color: "inherit",
"aria-label": "menu",
"aria-haspopup": "true",
onClick: handleDrawerOpen,
}}
>
<MenuIcon />
</IconButton>
<Drawer
{...{
anchor: "left",
open: drawerOpen,
onClose: handleDrawerClose,
}}
>
<div className={drawerContainer}>{getDrawerChoices()}</div>
</Drawer>
<div>{EarthWonders}</div>
</Toolbar>
);
};
const getDrawerChoices = () => {
return linkDetails.map(({ displayName, href }) => {
return (
<Link
{...{
component: RouterLink,
to: href,
color: "inherit",
style: { textDecoration: "none" },
key: displayName,
}}
>
<MenuItem>{displayName}</MenuItem>
</Link>
);
});
};
const EarthWonders = (
<Typography variant="h6" component="h1" className={logoText}>
EarthWonders
</Typography>
);
const getMenuButtons = () => {
return linkDetails.map(({ displayName, href }) => {
return (
<Button
{...{
key: displayName,
color: "inherit",
to: href,
component: RouterLink,
className: menuButton,
}}
>
{displayName}
</Button>
);
});
};
return (
<NavBar>
<AppBar className={NavBar}>
{mobileView ? viewMobile() : desktopView()}
</AppBar>
</NavBar>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment