React материал пользовательского интерфейса Appbar сделал отзывчивым

Question

Я пытаюсь использовать панель приложения и код в пользовательском интерфейсе в соответствии с требованиями пользователя. Я создаю персональный проект, к которому можно будет получить доступ со смартфона Galaxy s8. В конечном итоге я хотел бы, чтобы навигационные ссылки и кнопка выхода из системы на панели навигации были объединены в кнопку гамбургера, когда область просмотра мала. Однако я не совсем уверен, как этого добиться, поскольку я использую flexbox на веб-странице, когда она в полном размере, и она продолжает меня портить.

Вот панель приложения в полном размере:

Вот панель приложения на размер телефона с кнопкой гамбургера:

Вот желаемый эффект я бы например, элементы, сообщения, группы и кнопка выхода из системы, нажимаемая в меню гармошки на мобильном телефоне:

Вот мой код компонента navbar :

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);

Вот мой код таблицы стилей:

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;