/* eslint-disable no-else-return,no-restricted-globals */ import { useState } from "react"; import PropTypes from "prop-types"; import { NavLink as RouterLink, matchPath, useLocation, } from "react-router-dom"; // material import { useTheme, styled } from "@mui/material/styles"; import List from "@mui/material/List/List"; import ListItemText from "@mui/material/ListItemText/ListItemText"; import ListItemIcon from "@mui/material/ListItemIcon/ListItemIcon"; import ListItemButton from "@mui/material/ListItemButton/ListItemButton"; import Box from "@mui/material/Box/Box"; import Screensaver from "../assests/images/sb_screensaver.png"; import { constants } from "../constants/constants"; import style from "../pages/Style/DashboardSidebar.module.css"; import { SvgIcon } from "@mui/material"; import { ReactComponent as CameraIcon } from "../assests/svg/ic_camera.svg"; import { ReactComponent as AlarmIcon } from "../assests/svg/ic_alarms.svg"; import { ReactComponent as AmenityIcon } from "../assests/svg/ic_amenities.svg"; import { ReactComponent as VehicleIcon } from "../assests/svg/ic_vehicles.svg"; import { ReactComponent as GuestIcon } from "../assests/svg/ic_guests.svg"; import { ReactComponent as meterIcon } from "../assests/svg/ic_meters.svg"; import { ReactComponent as MessageIcon } from "../assests/svg/ic_messages.svg"; import { ReactComponent as galleryIcon } from "../assests/svg/ic_gallery.svg"; import { ReactComponent as HomeIcon } from "../assests/svg/ic_home.svg"; // ---------------------------------------------------------------------- const ListItemStyle = styled((props) => ( ))(({ theme }) => ({ // ...theme.typography.body2, height: 46, position: "relative", // textTransform: "capitalize", // color: "#ffffff", borderRadius: "10px", })); const ListItemStyleActive = styled((props) => ( ))(({ theme }) => ({ // ...theme.typography.body2, height: 46, position: "relative", // textTransform: "capitalize", // color: "#ffffff", borderRadius: "10px", backgroundColor: "red", })); const ListItemStyleHome = styled((props) => ( ))(({ theme }) => ({ // ...theme.typography.body2, height: 36, position: "relative", // color: "#D6D6D6", // textTransform: "capitalize", borderRadius: "10px", })); const ListItemIconStyle = styled(ListItemIcon)({ color: "inherit", // display: "block", // margin: "auto", minWidth: "32px", }); const navIconstyle = { margin: "auto", height: "20px" }; // ---------------------------------------------------------------------- NavItem.propTypes = { item: PropTypes.object, active: PropTypes.func, }; // NavItemHome.propTypes = { // item: PropTypes.object, // active: PropTypes.func, // }; //--------------------------------------------------AUDIO---------------------------------------------------------- let audio = new Audio(process.env.PUBLIC_URL + constants.CLICKTONE_PATH); const start = () => { audio.play(); }; //--------------------------------------------------AUDIO---------------------------------------------------------- function NavItem({ item, active, array_length, index }) { const location = useLocation(); const theme = useTheme(); const isActiveRoot = active(item.path); const { title, path, icon, info, children, permission } = item; const [open, setOpen] = useState(isActiveRoot); const handleOpen = () => { setOpen((prev) => !prev); }; let image; if (path === "/dashboard/app") { image = ( theme.palette.active_text.main }} component={HomeIcon} inheritViewBox /> ); } else if (path === "/dashboard/amenity") { image = ( theme.palette.active_text.main }} component={AmenityIcon} inheritViewBox /> ); } else if (path === "/dashboard/guest") { image = ( theme.palette.active_text.main }} component={GuestIcon} inheritViewBox /> ); } else if (path === "/dashboard/alarm") { image = ( theme.palette.active_text.main }} component={AlarmIcon} inheritViewBox /> ); } else if (path === "/dashboard/message") { image = ( theme.palette.active_text.main }} component={MessageIcon} inheritViewBox /> ); } else if (path === "/dashboard/meter") { image = ( theme.palette.active_text.main }} component={meterIcon} inheritViewBox /> ); } else if (path === "/dashboard/camera") { image = ( theme.palette.active_text.main }} component={CameraIcon} inheritViewBox /> ); } else if (path === "/dashboard/gallery") { image = ( theme.palette.active_text.main }} component={galleryIcon} inheritViewBox /> ); } else if (path === "/dashboard/vehicles") { image = ( theme.palette.active_text.main }} component={VehicleIcon} inheritViewBox /> ); } else if (path === "/dashboard/screensaver") { image = (

); } return permission === 1 || permission === 2 ? ( <> {location.pathname === path ? ( <> {image && image} theme.palette.active_text.main }} disableTypography primary={title} /> ) : ( <> {image && image} theme.palette.active_text.main }} disableTypography primary={title} /> )} {/* {location.pathname === path ? ( <> {image && image} theme.palette.active_text.main }} disableTypography primary={title} /> ) : ( <> {icon && icon} theme.palette.white.main }} disableTypography primary={title} /> )} {info && info} */} {index < array_length - 1 ? ( theme.palette.border_color.main }} /> ) : ( <> )} ) : null; } // function NavItemHome({ item, active }) { // const isActiveRoot = active(item.path); // const { title, path, icon, info, permission } = item; // const activeRootStyle = { // color: (theme) => theme.palette.active_text.main, // }; // // if (children) { // // return permission === 1 ? ( // // <> // // // // {icon && icon} // // {info && info} // // // // // // // // // // {children.map((item) => { // // const { title, path } = item; // // const isActiveSub = active(path); // // return ( // // // // // // // // theme.transitions.create("transform"), // // ...(isActiveSub && { // // transform: "scale(2)", // // bgcolor: "primary.main", // // }), // // }} // // /> // // // // // // // // ); // // })} // // // // // // // // ) : null; // // } // return permission === 1 || permission === 2 ? ( // <> // // {icon && icon} // {path === location.pathname ? ( // theme.palette.active_text.main }} // disableTypography // primary={title} // /> // ) : ( // theme.palette.white.main }} // disableTypography // primary={title} // /> // )} // {info && info} // // // ) : null; // } NavSection.propTypes = { navConfig: PropTypes.array, }; export default function NavSection({ navConfig, length, margin, ...other }) { const { pathname } = useLocation(); const match = (path) => path ? !!matchPath({ path, end: false }, pathname) : false; return ( ADVAINT theme.palette.border_color.main, // backgroundColor: (theme) => theme.palette.sidebar_color.main }} > {navConfig.map((item, index) => { return ( ); })} ); } in this code we write a sidebar code we need a functionality if i click on any route set his baground color red and text color and icon color white , if i click on anather route then also change background color and text and icon color same and reset the privious route we need same feature of sidebar