React material ui appbar made responsive - css

Question

I am trying to use material ui's appbar and code in some custom responsiveness to it. I am creating a personal project that will be accessed from a Galaxy s8 smartphone. Ultimately I would like the nav-links and logout button on the navbar to consolidate into a hamburger button when the viewport is small. I am not quite sure how to achieve this however as I am using flexbox on the webpage when it is at full size and it keeps messing me up.
Here is the appbar at full size:
Here is the appbar at phone size with the hamburger button:
Here is the desired effect I would like with items, posts, groups, and the log out button being pushed to an accordion like menu on mobile:
Here is my navbar component code:
import { withStyles } from "#material-ui/core/styles";
import styles from "./styles/NavBarStyles";
import { LoggedInContext } from "./contexts/LoggedIn";
import { ThemeContext } from "./contexts/ThemeContext";
function Navbar(props) {
const { isDarkMode, toggleTheme } = useContext(ThemeContext);
const { loggedIn, changeLogIn, token, setToken } = useContext(
LoggedInContext
);
const { classes } = props;
const [mobileHamburgerOpen, setMobileHamburger] = useState(false);
const handleMobileClick = () => {
setMobileHamburger(!mobileHamburgerOpen);
console.log(mobileHamburgerOpen);
};
return (
<div className={classes.root}>
<AppBar
position="static"
style={{ background: isDarkMode ? "#2E3B55" : "#715AFF" }}
>
<Toolbar>
<Typography className={classes.title} variant="h6" color="inherit">
{isDarkMode ? "🌚" : "🌞"}
</Typography>
<Switch onChange={toggleTheme} />
<div className={classes.grow} />
{loggedIn && (
<div className={classes.loggedIn}>
<div className={classes.navlinks}>
<NavLink
to="/items"
activeStyle={{ background: "rgba(0, 0, 0, 0.5)" }}
>
Items
</NavLink>
<NavLink
to="/facebookitems"
activeStyle={{ background: "rgba(0, 0, 0, 0.5)" }}
>
<i className="fab fa-facebook-square"></i> Posts
</NavLink>
<NavLink
to="/groups"
activeStyle={{ background: "rgba(0, 0, 0, 0.5)" }}
>
<i className="fab fa-facebook-square"></i> Groups
</NavLink>
</div>
<Button
className={classes.logOutButton}
variant="contained"
color="secondary"
onClick={handleClick}
>
Log Out
</Button>
<Button
className={classes.hamburgerMenu}
variant="contained"
color="primary"
onClick={handleMobileClick}
>
<i className="fas fa-bars"></i>
</Button>
</div>
)}
</Toolbar>
</AppBar>
</div>
);
}
export default withStyles(styles)(Navbar);
Here is my style sheet code:
import { fade } from "#material-ui/core/styles/colorManipulator";
const styles = theme => ({
root: {
width: "100%",
marginBottom: 0
},
grow: {
flexGrow: 1
},
menuButton: {
marginLeft: -12,
marginRight: 20
},
title: {
display: 'block'
},
search: {
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
"&:hover": {
backgroundColor: fade(theme.palette.common.white, 0.25)
},
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(1),
width: "auto"
}
},
searchIcon: {
width: theme.spacing(9),
height: "100%",
position: "absolute",
display: "flex",
alignItems: "center",
justifyContent: "center"
},
inputRoot: {
color: "inherit",
width: "100%"
},
inputInput: {
paddingTop: theme.spacing(1),
paddingRight: theme.spacing(1),
paddingBottom: theme.spacing(1),
paddingLeft: theme.spacing(10),
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("sm")]: {
width: 120,
"&:focus": {
width: 200
}
}
},
loggedIn: {
width: "100%",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
paddingLeft: "2rem"
},
navlinks: {
// [theme.breakpoints.down("sm")]: {
// position: 'absolute',
// backgroundColor: "rgba(0,0,0,.7)",
// top: '0%',
// right: '0%',
// width: '100vw',
// height: '100vh'
// },
"& a": {
color: "white",
fontWeight: "bold",
fontSize: "1.5rem",
textDecoration: "none",
marginRight: '1rem',
padding: ".5rem",
borderRadius: "15px"
},
"& a:active": {
backgroundColor: "rgba(0, 0, 0, 0.5)"
}
},
hamburgerMenu: {
display: 'none',
[theme.breakpoints.down("sm")]: {
display: 'block',
marginLeft: "auto",
backgroundColor: "white",
color: "#715AFF"
}
},
logOutButton: {
// [theme.breakpoints.down("sm")]: {
// display: 'none'
// }
}
});
export default styles;