feat: Route list page
This commit is contained in:
@ -8,7 +8,7 @@ import List from "@mui/material/List";
|
||||
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import type { NavigationItem } from "../model";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
|
||||
interface NavigationItemProps {
|
||||
item: NavigationItem;
|
||||
@ -25,8 +25,11 @@ export const NavigationItemComponent: React.FC<NavigationItemProps> = ({
|
||||
}) => {
|
||||
const Icon = item.icon;
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [isExpanded, setIsExpanded] = React.useState(false);
|
||||
|
||||
const isActive = item.path ? location.pathname.startsWith(item.path) : false;
|
||||
|
||||
const handleClick = () => {
|
||||
if (item.nestedItems) {
|
||||
setIsExpanded(!isExpanded);
|
||||
@ -57,6 +60,12 @@ export const NavigationItemComponent: React.FC<NavigationItemProps> = ({
|
||||
isNested && {
|
||||
pl: 4,
|
||||
},
|
||||
isActive && {
|
||||
backgroundColor: "rgba(0, 0, 0, 0.08)",
|
||||
"&:hover": {
|
||||
backgroundColor: "rgba(0, 0, 0, 0.12)",
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<ListItemIcon
|
||||
@ -64,6 +73,7 @@ export const NavigationItemComponent: React.FC<NavigationItemProps> = ({
|
||||
{
|
||||
minWidth: 0,
|
||||
justifyContent: "center",
|
||||
color: isActive ? "primary.main" : "inherit",
|
||||
},
|
||||
open
|
||||
? {
|
||||
@ -86,6 +96,10 @@ export const NavigationItemComponent: React.FC<NavigationItemProps> = ({
|
||||
: {
|
||||
opacity: 0,
|
||||
},
|
||||
isActive && {
|
||||
color: "primary.main",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{item.nestedItems &&
|
||||
|
Reference in New Issue
Block a user