Layout - Copy this React, Tailwind Component to your project

import React, { useState } from "react"; import { Box, Drawer, IconButton, Typography, List, ListItem, ListItemIcon, ListItemText, Avatar, Menu, MenuItem, Badge, Tooltip } from "@mui/material"; import { styled } from "@mui/system"; import { FaBars, FaHome, FaChartBar, FaCog, FaSignOutAlt, FaUser, FaEnvelope, FaBell } from "react-icons/fa"; const StyledDrawer = styled(Drawer)(({ theme }) => ({ "& .MuiDrawer-paper": { background: "linear-gradient(45deg, #1a237e 30%, #0d47a1 90%)", color: "#ffffff", border: 0, transition: "width 0.3s ease", overflow: "hidden", boxShadow: "4px 0 15px rgba(0, 0, 0, 0.2)" } })); const Header = styled(Box)({ padding: "20px", display: "flex", alignItems: "center", justifyContent: "space-between", borderBottom: "1px solid rgba(255, 255, 255, 0.1)" }); const Logo = styled(Box)({ display: "flex", alignItems: "center", gap: "10px" }); const UserSection = styled(Box)({ position: "absolute", bottom: 0, width: "100%", padding: "20px", borderTop: "1px solid rgba(255, 255, 255, 0.1)", background: "rgba(255, 255, 255, 0.05)" }); const SidebarMenu = () => { const [isOpen, setIsOpen] = useState(true); const [anchorEl, setAnchorEl] = useState(null); const drawerWidth = isOpen ? 280 : 80; const menuItems = [ { icon: <FaHome size={24} />, text: "Dashboard" }, { icon: <FaChartBar size={24} />, text: "Analytics" }, { icon: <FaBell size={24} />, text: "Notifications" }, { icon: <FaCog size={24} />, text: "Settings" } ]; const userData = { name: "John Doe", email: "john.doe@example.com", avatar: "https://images.unsplash.com/photo-1633332755192-727a05c4013d" }; const handleMenuOpen = (event) => { setAnchorEl(event.currentTarget); }; const handleMenuClose = () => { setAnchorEl(null); }; const handleLogout = () => { console.log("Logout clicked"); handleMenuClose(); }; const handleMenuItemClick = (path) => { setIsOpen(false); // Close the menu after click (optional) // Navigate to the selected path }; return ( <StyledDrawer variant="permanent" sx={{ width: drawerWidth, "& .MuiDrawer-paper": { width: drawerWidth } }} > <Header> <Logo> <IconButton onClick={() => setIsOpen(!isOpen)} sx={{ color: "#ffffff" }} aria-label="toggle sidebar" > <FaBars /> </IconButton> {isOpen && ( <Typography variant="h6" sx={{ fontWeight: "bold" }}> NeoApp </Typography> )} </Logo> {isOpen && ( <Typography variant="caption" sx={{ opacity: 0.7 }}> v2.0.0 </Typography> )} </Header> <List sx={{ padding: "20px 0" }}> {menuItems.map((item, index) => ( <ListItem button key={index} sx={{ padding: "15px 20px", backgroundColor: window.location.pathname === item.text.toLowerCase() ? "#283a77" : "transparent", // Highlight active item color: window.location.pathname === item.text.toLowerCase() ? "#ffffff" : "#ffffff80", // Change text color for active item "&:hover": { background: "rgba(255, 255, 255, 0.1)" } }} onClick={() => handleMenuItemClick(item.text.toLowerCase())} > <Tooltip title={!isOpen ? item.text : ""} placement="right"> <ListItemIcon sx={{ color: "#ffffff", minWidth: 40 }}> {item.icon} </ListItemIcon> </Tooltip> {isOpen && <ListItemText primary={item.text} />} </ListItem> ))} </List> <UserSection> <Box sx={{ display: "flex", alignItems: "center", gap: "10px", cursor: "pointer" }} onClick={handleMenuOpen} > <Badge overlap="circular" anchorOrigin={{ vertical: "bottom", horizontal: "right" }} variant="dot" color="success" > <Avatar src={userData.avatar} alt={userData.name} sx={{ width: isOpen ? 40 : 32, height: isOpen ? 40 : 32, transition: "all 0.3s ease" }} /> </Badge> {isOpen && ( <Box sx={{ flexGrow: 1 }}> <Typography variant="subtitle2">{userData.name}</Typography> <Typography variant="caption" sx={{ opacity: 0.7 }}> {userData.email} </Typography> </Box> )} </Box> <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose} anchorOrigin={{ vertical: "top", horizontal: "right" }} transformOrigin={{ vertical: "bottom", horizontal: "right" }} > <MenuItem onClick={handleMenuClose}> <ListItemIcon> <FaUser size={16} /> </ListItemIcon> Profile </MenuItem> <MenuItem onClick={handleMenuClose}> <ListItemIcon> <FaEnvelope size={16} /> </ListItemIcon> Messages </MenuItem> <MenuItem onClick={handleLogout}> <ListItemIcon> <FaSignOutAlt size={16} /> </ListItemIcon> Logout </MenuItem> </Menu> </UserSection> </StyledDrawer> ); }; export default SidebarMenu; como adaptarias este menu lateral para que al seleccionar las distitnas opciones me abra en la parte derecha la pagina concreta