我正在做一個側邊欄項目，它使用了react-pro-sidebar。側邊欄有兩種模式，展開和折疊。折疊時，只有圖標可用。如果我點擊一個菜單項，活動元素的背景會變成colors.greenAccent[500]并保持這種狀態，直到另一個元素被點擊。我目前的問題是，如果我折疊側邊欄，并改變到一個不同的菜單項背景顏色不會改變。我嘗試過創建條件，所以它是折疊的，它也改變了背景代碼，但沒有一個工作。我想可能有一些CSS屬性覆蓋了那個條件，但是我不確定。
這是代碼:
import { Sidebar, Menu, MenuItem, useProSidebar } from 'react-pro-sidebar';
import { useState } from "react";
import { tokens } from "../theme";
import { Box, IconButton, Typography, useTheme } from "@mui/material";
import { Link, useNavigate } from 'react-router-dom';
import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded';
import TwitterIcon from '@mui/icons-material/Twitter';
import SportsSoccerIcon from '@mui/icons-material/SportsSoccer';
import EditNotificationsIcon from '@mui/icons-material/EditNotifications';
import PeopleIcon from '@mui/icons-material/People';
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import TimelineIcon from '@mui/icons-material/Timeline';
import BarChartIcon from '@mui/icons-material/BarChart';
import CameraIcon from '@mui/icons-material/Camera';
import AddchartIcon from '@mui/icons-material/Addchart';
import PanoramaIcon from '@mui/icons-material/Panorama';
import Divider from '@mui/material/Divider';
const Item = ({ title, to, icon, isSelected, setSelected }) => {
const theme = useTheme();
const colors = tokens(theme.palette.mode);
const navigate = useNavigate();
const { collapsed } = useProSidebar();
const handleClick = () => {
setSelected(title);
if (typeof to === 'string') {
// Handle internal routes
navigate(to);
} else if (typeof to === 'function') {
// Handle external routes with callback function
to();
}
};
const textColor = isSelected
? colors.primary[500]
: theme.palette.mode === 'dark'
? colors.grey[100]
: colors.grey[200];
const fontWeight = isSelected ? 'bold' : 'initial';
return (
<MenuItem
onClick={handleClick}
icon={icon}
style={{
background: isSelected ? colors.greenAccent[500] : "initial",
color: textColor,
borderRadius: "10px",
}}
>
<Typography sx={{ fontWeight: `${fontWeight} !important`, fontFamily: 'Noto Sans' }}>{title}</Typography>
</MenuItem>
);
};
function Sidebartest() {
const { toggleSidebar, collapseSidebar, broken, collapsed } = useProSidebar();
const theme = useTheme();
const colors = tokens(theme.palette.mode);
const [selected, setSelected] = useState("");
return (
<Box
sx={{
"& .ps-menu-icon": {
justifyContent: "center",
display: 'flex',
flexDirection: 'column',
paddingLeft: "5px",
},
"& .pro-sidebar": {
borderRight: "none !important",
},
"& .ps-sidebar-container": {
/*background sidebar*/
background: `${colors.primary[400]} !important`,
display: 'flex',
flexDirection: 'column',
justifyContent: `${collapsed ? "center" : ""}`,
/*borderRadius: '20px'*/
},
"& .ps-menu-label": {
/*Text*/
padding: "1% !important",
},
"& .ps-menu-button:hover": {
/*changes text color when hover.*/
color: `${colors.primary[700]} !important`,
background: `${colors.grey[100]} !important`,
borderRadius: "10px",
},
}}
> {/*padding: '1rem' on the div makes it look interesting.*/}
<div style={{ display: 'flex', height: '100%', padding: '1rem' }}>
<Sidebar className="pro-sidebar" transitionDuration={-100}>
<Menu iconShape="square">
{!collapsed && (
<Box mb="25px">
<Box textAlign="center">
<Typography
variant="h2"
color={colors.grey[100]}
fontWeight="bold"
sx={{ m: "10px 0 0 0" }}
>
CR
</Typography>
<Typography variant="h5" fontWeight="bold" color={colors.greenAccent[500]}>
Management Tool
</Typography>
</Box>
</Box>
)}
<Box padding={collapsed ? undefined : "1%"} margin={collapsed ? undefined : "10px"}>
<Item
title={collapsed ? "" : "Dashboard"}
to="/"
icon={<DashboardRoundedIcon />}
isSelected={selected === "Dashboard"}
setSelected={setSelected}
/>
{!collapsed ? (
<Typography
variant="h5"
color={colors.grey[200]}
fontWeight="bold"
sx={{ m: "15px 0 5px 20px" }}
>
Utilities
</Typography>
) : <Divider />}
<Item
title={collapsed ? "" : "Trending"}
icon={<TwitterIcon />}
to={"/trending"}
isSelected={selected === "Trending"}
setSelected={setSelected}
/>
<Item
title={collapsed ? "" : "HTE"}
to="/hte"
icon={<SportsSoccerIcon />}
isSelected={selected === "HTE"}
setSelected={setSelected}
/>
<Item
title={collapsed ? "" : "Notification"}
to="/notification"
icon={<EditNotificationsIcon />}
isSelected={selected === "Notification"}
setSelected={setSelected}
/>
<Item
title={collapsed ? "" : "Handover"}
to="/calendar"
icon={<PeopleIcon />}
isSelected={selected === "Handover"}
setSelected={setSelected}
/>
<Item
title={collapsed ? "" : "Coverage"}
to="/calendar"
icon={<CalendarMonthIcon />}
isSelected={selected === "Coverage"}
setSelected={setSelected}
/>
{!collapsed ? (
<Typography
variant="h5"
color={colors.grey[200]}
fontWeight="bold"
sx={{ m: "15px 0 5px 20px" }}
>
Tools
</Typography>
) : <Divider />}
<Item
title={collapsed ? "" : "NPAW"}
to="/calendar"
icon={<TimelineIcon />}
setSelected={setSelected}
/>
<Item
title={collapsed ? "" : "CloudWacth"}
to="/team"
icon={<TimelineIcon />}
setSelected={setSelected}
/>
<Item
title={collapsed ? "" : "Grafana"}
to="/tesm"
icon={<BarChartIcon />}
setSelected={setSelected}
/>
<Item
title={collapsed ? "" : "Graf"}
to="/team"
icon={<CameraIcon />}
setSelected={setSelected}
/>
<Item
title={collapsed ? "" : "Orion"}
to="/team"
icon={<BarChartIcon />}
setSelected={setSelected}
/>
{!collapsed ? (
<Typography
variant="h5"
color={colors.grey[200]}
fontWeight="bold"
sx={{ m: "15px 0 5px 20px" }}
>
Documents
</Typography>
) : <Divider />}
<Item
title={collapsed ? "" : "Confluence"}
to="/team"
icon={<AddchartIcon />}
setSelected={setSelected}
/>
<Item
title={collapsed ? "" : "Workplace"}
to={() => window.open('https://workplace.com', '_blank')}
icon={<AddchartIcon />}
setSelected={setSelected}
/>
</Box>
</Menu>
</Sidebar>
</div>
</Box >
);
}
export default Sidebartest;