Comunic/comunicconsole
1
0
Fork 0
mirror of https://gitlab.com/comunic/comunicconsole synced 2024-11-23 13:59:23 +00:00
Code Issues Projects Releases Wiki Activity

Highlight active section in menu

Browse Source
This commit is contained in:
Pierre HUBERT 2021-05-14 15:56:15 +02:00
parent 938b46dedf
commit bf46cc7043
1 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/ui/routes/MainRoute.tsx
View File

@ -12,6 +12,7 @@ import {
ListItemIcon,
ListItemText,
makeStyles,
MenuItem,
Paper,
Toolbar,
Typography,
@ -24,6 +25,7 @@ import {
Route,
Switch,
useHistory,
useRouteMatch,
} from "react-router-dom";
import { AccountHelper } from "../../helpers/AccountHelper";
import { AccountSettingsRoute } from "./AccountSettingsRoute";
@ -80,32 +82,42 @@ const useStyles = makeStyles((theme) => ({
}));
function Menu() {
const history = useHistory();
const openHome = () => history.push("/");
const openMyAccount = () =>
history.push("/accounts/" + AccountHelper.currentAccount.id);
return (
<div>
<List component="nav" aria-label="main mailbox folders">
<ListItem button onClick={openHome}>
<ListItemIcon>
<Home />
</ListItemIcon>
<ListItemText primary="Home" />
</ListItem>
<ListItem button onClick={openMyAccount}>
<ListItemIcon>
<Person />
</ListItemIcon>
<ListItemText primary="My account" />
</ListItem>
<MainMenuItem title="Home" icon={<Home />} uri="/" />
<MainMenuItem
title="My account"
icon={<Person />}
uri={"/accounts/" + AccountHelper.currentAccount.id}
/>
</List>
</div>
);
}
function MainMenuItem(p: {
title: string;
icon: React.ReactNode;
uri: string;
}) {
const history = useHistory();
const openMyAccount = () => history.push(p.uri);
const selected =
useRouteMatch({
path: p.uri,
exact: true,
}) != null;
return (
<ListItem button onClick={openMyAccount} selected={selected}>
<ListItemIcon>{p.icon}</ListItemIcon>
<ListItemText primary={p.title} />
</ListItem>
);
}
export function MainRoute() {
const classes = useStyles();