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