React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.
In this article, we’ll be discussing React MUI Drawer Navigation. In navigation, drawers, commonly known as sidebars, provide access to destinations and app functionality like switching to different pages of websites, etc. It can either be permanently on-screen or controlled by a menu icon.
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.
Drawer API: The drawer API’s are:
- <Drawer />
- <SwipeableDrawer />
Syntax:
{
(['left', 'right', 'top', 'bottom'] as const)
.map((anchor) => (
<React.Fragment key={anchor}>
<Button>{anchor}</Button>
<Drawer>
...
</Drawer>
</React.Fragment>
))
}
Creating React Project:
Step 1: To create a react app, install react modules through npm command.
npm create-react-app project name
Step 2: After creating your react project, move into the folder to perform different operations.
cd project name
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @mui/material @emotion/react @emotion/styled
Project Structure:
Step to Run Application: Open the terminal and type the following command.
npm start
Example 1: 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 }} > neveropen </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>neveropen</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: Below example demonstrates the React MUI responsive drawer.
Javascript
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 }} > neveropen </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 neveropen 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> neveropen 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/
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
