React MUI Drawer Navigation

React MUI Drawer Navigation provide easy access to destinations and functionality such as switching accounts.

React MUI Drawer Navigation

React MUI Drawer Navigation offer user-friendly access to various destinations within a site or app, provide access to functionalities like switching to different pages of website. It is also refered as sidebar navigation.It can either be permanently on-screen or controlled by a menu icon.

React MUI Drawer Syntax:

{
    (['left', 'right', 'top', 'bottom'] as const)
    .map((anchor) => (
        <React.Fragment key={anchor}>
            <Button>{anchor}</Button>
            <Drawer>
                ...
            </Drawer>
        </React.Fragment>
    ))
}

React MUI Drawer types:

• Temporary drawer: This drawer can toggle open or closed and closed by default. The drawer opens temporarily above all other content until any section is selected.
• Responsive drawer: This drawer is responsive in nature.
• Persistent drawer: In this navigation, the drawer can toggle open or closed. It is on the same surface elevation as the content and is closed by default and opens by selecting the menu icon and stays open until it is closed.
• Mini variant drawer: In this drawer navigation, the persistent navigation drawer changes its width.
• Permanent drawer: They are always visible and aligned to the left edge with the same elevation as the content or background and cannot be closed.

React MUI Drawer API:

The drawer API’s are:

• <Drawer />
• <SwipeableDrawer />

React MUI Drawer Navigation Examples:

Below are the examples of React MUI Drawer Navigation, one as a temporary drawer and one as responsive drawer.

Example 1: React MUI temporary drawer

Below example demonstrates the React MUI temporary drawer.

Javascript

import React from "react";
import { Typography } from "@mui/material";
import Box from "@mui/material/Box";
import Drawer from "@mui/material/Drawer";
import Button from "@mui/material/Button";
import List from "@mui/material/List";
import Divider from "@mui/material/Divider";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";

import {
    CollectionsBookmark,
    Edit,
    Feedback,
    Help,
    PermMedia,
    UploadFile,
    Work,
} from "@mui/icons-material";

function App() {

    const [state, setState] = React.useState({
        top: false,
        left: false,
        bottom: false,
        right: false,
    });

    const toggleDrawer = (anchor, open) => (event) => {
        if (
            event.type === "keydown" &&
            (event.key === "Tab" || event.key === "Shift")
        ) {
            return;
        }

        setState({ ...state, [anchor]: open });
    };

    const iemsList = (anchor) => (
        <Box
            sx={{
                width: anchor === "top" ||
                    anchor === "bottom" ? "auto" : 250,
                backgroundColor: "#09212E",
                height: '100%'
            }}
            role="drawer"
            onClick={toggleDrawer(anchor, false)}
            onKeyDown={toggleDrawer(anchor, false)}
        >
            <Typography
                sx={{ textAlign: "center", pt: 4,
                    color: "green", fontSize: 20 }}
            >
                GeeksforGeeks
            </Typography>
            <List>
                <ListItemButton sx={{ color: "white" }}>
                    <ListItemIcon sx={{ color: "white" }}>
                        {<Help />}
                    </ListItemIcon>
                    <ListItemText primary={"How to write"} />
                </ListItemButton>
                <ListItemButton sx={{ color: "white" }}>
                    <ListItemIcon sx={{ color: "white" }}>
                        {<CollectionsBookmark />}
                    </ListItemIcon>
                    <ListItemText primary={"Posts"} />
                </ListItemButton>
                <ListItemButton sx={{ color: "white" }}>
                    <ListItemIcon sx={{ color: "white" }}>
                        {<UploadFile />}
                    </ListItemIcon>
                    <ListItemText primary={"Pick Article"} />
                </ListItemButton>
                <ListItemButton sx={{ color: "white" }}>
                    <ListItemIcon sx={{ color: "white" }}>
                        {<Edit />}
                    </ListItemIcon>
                    <ListItemText primary={"Improve"} />
                </ListItemButton>
            </List>
            <Divider />
            <List>
                <ListItemButton sx={{ color: "white" }}>
                    <ListItemIcon sx={{ color: "white" }}>
                        {<Edit />}
                    </ListItemIcon>
                    <ListItemText primary={"Suggest"} />
                </ListItemButton>
                <ListItemButton sx={{ color: "white" }}>
                    <ListItemIcon sx={{ color: "white" }}>
                        {<Work />}
                    </ListItemIcon>
                    <ListItemText primary={"Work with us"} />
                </ListItemButton>
                <ListItemButton sx={{ color: "white" }}>
                    <ListItemIcon sx={{ color: "white" }}>
                        {<PermMedia />}
                    </ListItemIcon>
                    <ListItemText primary={"Media"} />
                </ListItemButton>
                <ListItemButton sx={{ color: "white" }}>
                    <ListItemIcon sx={{ color: "white" }}>
                        {<Feedback />}
                    </ListItemIcon>
                    <ListItemText primary={"Contact us"} />
                </ListItemButton>
            </List>
            <Typography
                sx={{
                    backgroundColor: "blue",
                    color: "white",
                    borderRadius: 10,
                    textAlign: "center",
                    padding: 1,
                    margin: 2,
                }}
            >
                Sign In
            </Typography>
        </Box>
    );

    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Drawer Navigation</h2>
            </div>
            <center>
                {["left", "right", "top", "bottom"].map((anchor) => (
                    <React.Fragment key={anchor}>
                        <Button onClick={toggleDrawer(anchor, true)}>
                            {anchor}
                        </Button>
                        <Drawer
                            anchor={anchor}
                            open={state[anchor]}
                            onClose={toggleDrawer(anchor, false)}
                        >
                            {iemsList(anchor)}
                        </Drawer>
                    </React.Fragment>
                ))}
            </center>
        </div>
    );
}

export default App;

Output:

Example 2: React MUI responsive drawer

Below example demonstrates the React MUI responsive drawer.

Javascript

// Filename - App.js

import React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import CssBaseline from "@mui/material/CssBaseline";
import Divider from "@mui/material/Divider";
import Drawer from "@mui/material/Drawer";
import IconButton from "@mui/material/IconButton";
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import MenuIcon from "@mui/icons-material/Menu";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";

import {
    CollectionsBookmark,
    Edit,
    Feedback,
    Help,
    PermMedia,
    UploadFile,
    Work,
} from "@mui/icons-material";

const drawWidth = 220;

function App() {
    const [mobileViewOpen, setMobileViewOpen] = React.useState(false);

    const handleToggle = () => {
        setMobileViewOpen(!mobileViewOpen);
    };

    const responsiveDrawer = (
        <div style={{ backgroundColor: "#09212E",
            height: "100%" }}>
            <Toolbar />
            <Divider />
            <Typography
                sx={{ textAlign: "center", pt: 4,
                    color: "green", fontSize: 20 }}
            >
                GeeksforGeeks
            </Typography>
            <List sx={{ backgroundColor: "#09212E" }}>
                <ListItemButton sx={{ color: "white" }}>
                    <ListItemIcon sx={{ color: "white" }}>
                        {<Help />}
                    </ListItemIcon>
                    <ListItemText primary={"How to write"} />
                </ListItemButton>
                <ListItemButton sx={{ color: "white" }}>
                    <ListItemIcon sx={{ color: "white" }}>
                        {<CollectionsBookmark />}
                    </ListItemIcon>
                    <ListItemText primary={"Posts"} />
                </ListItemButton>
                <ListItemButton sx={{ color: "white" }}>
                    <ListItemIcon sx={{ color: "white" }}>
                        {<UploadFile />}
                    </ListItemIcon>
                    <ListItemText primary={"Pick Article"} />
                </ListItemButton>
                <ListItemButton sx={{ color: "white" }}>
                    <ListItemIcon sx={{ color: "white" }}>
                        {<Edit />}
                    </ListItemIcon>
                    <ListItemText primary={"Improve"} />
                </ListItemButton>
            </List>
            <Divider />
            <List>
                <ListItemButton sx={{ color: "white" }}>
                    <ListItemIcon sx={{ color: "white" }}>
                        {<Edit />}
                    </ListItemIcon>
                    <ListItemText primary={"Suggest"} />
                </ListItemButton>
                <ListItemButton sx={{ color: "white" }}>
                    <ListItemIcon sx={{ color: "white" }}>
                        {<Work />}
                    </ListItemIcon>
                    <ListItemText primary={"Work with us"} />
                </ListItemButton>
                <ListItemButton sx={{ color: "white" }}>
                    <ListItemIcon sx={{ color: "white" }}>
                        {<PermMedia />}
                    </ListItemIcon>
                    <ListItemText primary={"Media"} />
                </ListItemButton>
                <ListItemButton sx={{ color: "white" }}>
                    <ListItemIcon sx={{ color: "white" }}>
                        {<Feedback />}</ListItemIcon>
                    <ListItemText primary={"Contact us"} />
                </ListItemButton>
            </List>
            <Typography
                sx={{
                    backgroundColor: "blue",
                    color: "white",
                    borderRadius: 10,
                    textAlign: "center",
                    padding: 1,
                    margin: 2,
                }}
            >
                Sign In
            </Typography>
        </div>
    );

    return (
        <div>
            <div>
                <Box sx={{ display: "flex" }}>
                    <CssBaseline />
                    <AppBar
                        position="fixed"
                        sx={{
                            width: { sm: `calc(100% - ${drawWidth}px)` },
                            ml: { sm: `${drawWidth}px` },
                            backgroundColor: "green",
                        }}
                    >
                        <Toolbar>
                            <IconButton
                                color="inherit"
                                edge="start"
                                onClick={handleToggle}
                                sx={{ mr: 2, display: { sm: "none" } }}
                            >
                                <MenuIcon />
                            </IconButton>
                            <Typography variant="h6">
                                Welcome to GeeksforGeeks Write Portal
                            </Typography>
                        </Toolbar>
                    </AppBar>
                    <Box
                        component="nav"
                        sx={{ width: { sm: drawWidth },
                            flexShrink: { sm: 0 } }}
                    >
                        <Drawer
                            variant="temporary"
                            open={mobileViewOpen}
                            onClose={handleToggle}
                            ModalProps={{
                                keepMounted: true,
                            }}
                            sx={{
                                display: { xs: "block", sm: "none" },
                                "& .MuiDrawer-paper": {
                                    boxSizing: "border-box",
                                    width: drawWidth,
                                },
                            }}
                        >
                            {responsiveDrawer}
                        </Drawer>
                        <Drawer
                            variant="permanent"
                            sx={{
                                display: { xs: "none", sm: "block" },
                                "& .MuiDrawer-paper": {
                                    boxSizing: "border-box",
                                    width: drawWidth,
                                },
                            }}
                            open
                        >
                            {responsiveDrawer}
                        </Drawer>
                    </Box>
                    <Box
                        component="main"
                        sx={{
                            flexGrow: 1,
                            p: 3,
                            width: { sm: `calc(100% - ${drawWidth}px)` },
                        }}
                    >
                        <Toolbar />
                        <Typography paragraph>
                            GeeksforGeeks provides Free Tutorials,
                            Millions of Articles, Live,
                            Online and Classroom Courses ,Frequent
                            Coding Competitions, Webinars by Industry
                            Experts, Internship opportunities and Job
                            Opportunities. It provides all the
                            individuals with a ‘Contribute’
                            feature on their platform where they
                            can come to write on a particular topic
                            and share it with everyone and helps you to
                            enhance your knowledge and expertise
                            of particular subjects and
                            allows you to showcase your research
                            and writing skills to all
                            others across the world. Not only
                            this but you’ll also get
                            rewarded for it in the form of
                            remuneration, internship
                            opportunities, discount offers, etc.
                        </Typography>
                    </Box>
                </Box>
            </div>
        </div>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/react-drawer/