reactjs - 按下搜索按钮，搜索字段将出现在移动屏幕上

Question

我有这个导航栏，我希望它能够响应。我有一个搜索图标和一个搜索字段。在大屏幕上，我希望出现搜索图标和搜索字段。我在代码中做到了这一点，但我无法在移动屏幕上做到这一点。当我按下搜索按钮时，会出现搜索字段。我怎样才能做到这一点？

const useStyles = makeStyles((theme) => ({
  toolbar: {
    display: "flex",
    justifyContent: "space-between",
  },
  logoLg: {
    display: "none",
    [theme.breakpoints.up("sm")]: {
      display: "block",
    },
  },
  logoSm: {
    display: "block",
    [theme.breakpoints.up("sm")]: {
      display: "none",
    },
  },
  search: {
    display: "flex",
    alignItems: "center",
    backgroundColor: alpha(theme.palette.common.white, 0.15),
    "&:hover": {
      backgroundColor: alpha(theme.palette.common.white, 0.25),
    },
    borderRadius: theme.shape.borderRadius,
    width: "50%",
   
  },
  input: {
    color: "white",
    marginLeft: theme.spacing(1),
  },
  icons: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
  },
  badge: {
    marginRight: theme.spacing(2)
  },
  searchButton:{
    arginRight: theme.spacing(2)
  }
}));

const Navbar = () => {
    const [open, setOpen] = useState(false);
  const classes = useStyles({open});
  return (
    <AppBar>
      <Toolbar className={classes.toolbar}>
        <Typography
          /*style*/ variant="h6"
          className={classes.logoLg} /*our label component="h2"*/
        >
          Lama Dev
        </Typography>

        <Typography
          /*style*/ variant="h6"
          className={classes.logoSm} /*our label component="h2"*/
        >
          Lama
        </Typography>

        <div className={classes.search}>
          <SearchIcon></SearchIcon>
          <InputBase placeholder="Search..." className={classes.input} />
        </div>
        <div className={classes.icons}>
          <SearchIcon className= { classes.searchButton} onClick={()=> setOpen(true)}/>
          <Badge badgeContent={4} color="secondary" className={classes.badge}>
            <MailIcon color="action" />
          </Badge>
          <Badge badgeContent={2} color="secondary" className={classes.badge}>
            <NotificationsIcon color="action" />
          </Badge>
          <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
        </div>
      </Toolbar>
    </AppBar>
  );
};

export default Navbar;