the current route is displayed in a different colour in the ServerPage Sidebar
This commit is contained in:
parent
feffa53487
commit
4b4546c380
|
@ -39,7 +39,7 @@ const Sidebar = ({ t, className, open, variant, onClose, onOpen }: Props) => {
|
||||||
to: generatePath(ROUTES.SERVER_PAGE.INDEX_PAGE, {
|
to: generatePath(ROUTES.SERVER_PAGE.INDEX_PAGE, {
|
||||||
key: key,
|
key: key,
|
||||||
}),
|
}),
|
||||||
Icon: <DashboardIcon />,
|
Icon: <DashboardIcon color="inherit" />,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import React, { Fragment, useState } from 'react';
|
import React, { Fragment, useState } from 'react';
|
||||||
|
import { useLocation } from 'react-router-dom';
|
||||||
import { Route } from './types';
|
import { Route } from './types';
|
||||||
|
|
||||||
import { makeStyles } from '@material-ui/core/styles';
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
|
@ -12,6 +13,7 @@ import {
|
||||||
} from '@material-ui/core';
|
} from '@material-ui/core';
|
||||||
import { ExpandLess, ExpandMore } from '@material-ui/icons';
|
import { ExpandLess, ExpandMore } from '@material-ui/icons';
|
||||||
import Link from '@common/Link/Link';
|
import Link from '@common/Link/Link';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
route: Route;
|
route: Route;
|
||||||
|
@ -23,11 +25,15 @@ const useStyles = makeStyles(theme => ({
|
||||||
display: 'block',
|
display: 'block',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
},
|
},
|
||||||
|
activeLink: {
|
||||||
|
color: theme.palette.secondary.main,
|
||||||
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
function ListItem({ route, nestedLevel }: Props) {
|
function ListItem({ route, nestedLevel }: Props) {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
|
const { pathname } = useLocation();
|
||||||
const hasNested = Array.isArray(route.nested) && route.nested.length > 0;
|
const hasNested = Array.isArray(route.nested) && route.nested.length > 0;
|
||||||
|
|
||||||
const getItem = () => {
|
const getItem = () => {
|
||||||
|
@ -39,7 +45,11 @@ function ListItem({ route, nestedLevel }: Props) {
|
||||||
component={Box}
|
component={Box}
|
||||||
pl={nestedLevel}
|
pl={nestedLevel}
|
||||||
>
|
>
|
||||||
<ListItemIcon>{route.Icon}</ListItemIcon>
|
<ListItemIcon
|
||||||
|
className={clsx({ [classes.activeLink]: route.to === pathname })}
|
||||||
|
>
|
||||||
|
{route.Icon}
|
||||||
|
</ListItemIcon>
|
||||||
<ListItemText primary={route.name} />
|
<ListItemText primary={route.name} />
|
||||||
{hasNested && (
|
{hasNested && (
|
||||||
<Fragment>{open ? <ExpandLess /> : <ExpandMore />}</Fragment>
|
<Fragment>{open ? <ExpandLess /> : <ExpandMore />}</Fragment>
|
||||||
|
@ -51,7 +61,11 @@ function ListItem({ route, nestedLevel }: Props) {
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
{!hasNested ? (
|
{!hasNested ? (
|
||||||
<Link to={route.to} className={classes.link} color="inherit">
|
<Link
|
||||||
|
to={route.to}
|
||||||
|
className={classes.link}
|
||||||
|
color={pathname === route.to ? 'secondary' : 'inherit'}
|
||||||
|
>
|
||||||
{getItem()}
|
{getItem()}
|
||||||
</Link>
|
</Link>
|
||||||
) : (
|
) : (
|
||||||
|
|
Reference in New Issue
Block a user