Material UI: how to switch from sidebar to bottom navigation when using grid

Question

I want my sidebar to be bottom navigation on mobile view. How can i switch these components depending on the size of the screen. I wonder is there a way to do it with the material ui grid scaling ("lg, xs etc.")?

    <Grid container sx={{backgroundColor: '#02141C;'}}>
        <Grid item xs={2}>
            <Sidebar />
        </Grid>
        <Grid item lg={10}>
            <ArticleGrid />
        </Grid>           
    </Grid>
   

Answer 1

1. Add sx={{ display: { xs: "none", sm: "flex" } }} to SideBar
2. Add sx={{ display: { sm: "none" } }} to BottomNavigation

The code:

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

Play around with the code here