Пользовательский интерфейс материалов: как переключиться с боковой панели на нижнюю навигацию при использовании сетки

1. Добавьте sx = {{ display: { xs: "none", sm: "flex" } }} на боковую панель
2. Добавьте sx = {{ display: { sm: "none" } }} в BottomNavigation

Код:

import * as React from "react";
import Box from "@mui/material/Box";
import BottomNavigation from "@mui/material/BottomNavigation";
import BottomNavigationAction from "@mui/material/BottomNavigationAction";
import RestoreIcon from "@mui/icons-material/Restore";
import FavoriteIcon from "@mui/icons-material/Favorite";
import LocationOnIcon from "@mui/icons-material/LocationOn";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";

export default function SimpleBottomNavigation() {
  const [value, setValue] = React.useState(0);

  const SideBar = () => {
    return (
      <AppBar position = "static" sx = {{ display: { xs: "none", sm: "flex" } }}>
        <Toolbar variant = "dense">
          <IconButton
            edge = "start"
            color = "inherit"
            aria-label = "menu"
            sx = {{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant = "h6" color = "inherit" component = "div">
            Side Bar
          </Typography>
        </Toolbar>
      </AppBar>
    );
  };

  const BottomNav = () => {
    return (
      <BottomNavigation
        showLabels
        value = {value}
        onChange = {(event, newValue) => {
          setValue(newValue);
        }}
        sx = {{ display: { sm: "none" } }}
      >
        <BottomNavigationAction label = "Recents" icon = {<RestoreIcon />} />
        <BottomNavigationAction label = "Favorites" icon = {<FavoriteIcon />} />
        <BottomNavigationAction label = "Nearby" icon = {<LocationOnIcon />} />
      </BottomNavigation>
    );
  };

  return (
    <Box sx = {{ maxWidth: 'xl' }}>
      <SideBar />
      <BottomNav />
    </Box>
  );
}

Поэкспериментируйте с кодом здесь