Responsive Material-UI React Sidebar Dashboard

Import React, { useState } from "react"; import { AppBar, Box, Drawer, IconButton, List, ListItem, ListItemIcon, ListItemText, Toolbar, Typography, InputBase, Avatar, Menu, MenuItem, useTheme, styled, } from "@mui/material"; import { MenuOpen, Home, Group, Settings, BarChart, Mail, ChevronLeft, ChevronRight, Notifications, SearchOffOutlined, } from "@mui/icons material"; const drawerWidth = 240; const Main = styled("main")(({ theme, open }) => ({ flexGrow: 1, padding: theme.spacing(3), transition: theme.transitions.create("margin", { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), marginLeft: ${drawerWidth}px, ...(open && { transition: theme.transitions.create("margin", { easing: theme.transitions.easing.easeOut, duration: theme.transitions.duration.enteringScreen, }), marginLeft: 0, }), })); const Search = styled("div")(({ theme }) => ({ position: "relative", borderRadius: theme.shape.borderRadius, backgroundColor: "rgba(255, 255, 255, 0.15)", "&:hover": { backgroundColor: "rgba(255, 255, 255, 0.25)", }, marginRight: theme.spacing(2), marginLeft: 0, width: "100%", [theme.breakpoints.up("sm")]: { marginLeft: theme.spacing(3), width: "auto", }, })); const SearchIconWrapper = styled("div")(({ theme }) => ({ padding: theme.spacing(0, 2), height: "100%", position: "absolute", pointerEvents: "none", display: "flex", alignItems: "center", justifyContent: "center", })); const StyledInputBase = styled(InputBase)(({ theme }) => ({ color: "inherit", "& .MuiInputBase input": { padding: theme.spacing(1, 1, 1, 0), paddingLeft: calc(1em + ${theme.spacing(4)}), transition: theme.transitions.create("width"), width: "100%", [theme.breakpoints.up("md")]: { width: "20ch", }, }, })); const Sidebar = () => { const theme = useTheme(); const [open, setOpen] = useState(true); const [anchorEl, setAnchorEl] = useState(null); const [selectedIndex, setSelectedIndex] = useState(0); const handleDrawerToggle = () => { setOpen(!open); }; const handleProfileMenuOpen = (event) => { setAnchorEl(event.currentTarget); }; const handleMenuClose = () => { setAnchorEl(null); }; const menuItems = [ { text: "Dashboard", icon: <Home size={20} /> }, { text: "Users", icon: <Group size={20} /> }, { text: "Analytics", icon: <BarChart size={20} /> }, { text: "Messages", icon: <Mail size={20} /> }, { text: "Settings", icon: <Settings size={20} /> }, ]; return ( <Box sx={{ display: "flex" }}> <AppBar position="fixed" sx={{ backgroundColor: "#ffffff", color: "primary.main", width: calc(100% ${open ? drawerWidth : 0}px), ml: ${open ? drawerWidth : 0}px, transition: theme.transitions.create(["margin", "width"], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), }} > <Toolbar> <IconButton color="inherit" aria label="open drawer" onClick={handleDrawerToggle} edge="start" sx={{ mr: 2 }} > <MenuOpen /> </IconButton> <Typography variant="h6" noWrap component="div" sx={{ display: { xs: "none", sm: "block" } }} > Admin Dashboard </Typography> <Search> <SearchIconWrapper> <SearchOffOutlined /> </SearchIconWrapper> <StyledInputBase placeholder="Search..." inputProps={{ "aria label": "search" }} /> </Search> <Box sx={{ flexGrow: 1 }} /> <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}> <IconButton size="large" color="inherit"> <Notifications /> </IconButton> <IconButton size="large" edge="end" aria haspopup="true" onClick={handleProfileMenuOpen} color="inherit" > <Avatar alt="Admin User" src="https://images.unsplash.com/photo 1535713875002 d1d0cf377fde" sx={{ width: 32, height: 32 }} /> </IconButton> </Box> </Toolbar> </AppBar> <Drawer sx={{ width: drawerWidth, flexShrink: 0, "& .MuiDrawer paper": { width: drawerWidth, boxSizing: "border box", backgroundColor: "#ffffff", color: "primary.main", }, }} variant="persistent" anchor="left" open={open} > <Box sx={{ p: 2, textAlign: "center" }}> <Typography variant="h6">Admin</Typography> </Box> <List> {menuItems.map((item, index) => ( <ListItem button key={item.text} selected={selectedIndex === index} onClick={() => setSelectedIndex(index)} sx={{ "&.Mui selected": { backgroundColor: "primary.main", color: "white", "&:hover": { backgroundColor: "primary.dark", }, "& .MuiListItemIcon root": { color: "white", }, }, }} > <ListItemIcon sx={{ color: selectedIndex === index ? "white" : "inherit", }} > {item.icon} </ListItemIcon> <ListItemText primary={item.text} /> </ListItem> ))} </List> </Drawer> <Main open={open}> <Box sx={{ height: 64 }} /> <Typography paragraph> Welcome to the Admin Dashboard. Select an option from the sidebar to get started. </Typography> </Main> <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose} onClick={handleMenuClose} > <MenuItem>Profile</MenuItem> <MenuItem>My account</MenuItem> <MenuItem>Logout</MenuItem> </Menu> </Box> ); }; export default Sidebar; 1. The body background will have a beautiful color and there will be a card that will contain all the design or content. 2. design more attractive and more user friendly. 3. mobile responsive must.