From bf46cc70432b02b9f28e017bb82232bec273ba39 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Fri, 14 May 2021 15:56:15 +0200
Subject: [PATCH] Highlight active section in menu

---
 src/ui/routes/MainRoute.tsx | 48 +++++++++++++++++++++++--------------
 1 file changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/ui/routes/MainRoute.tsx b/src/ui/routes/MainRoute.tsx
index 33d99a9..825ce38 100644
--- a/src/ui/routes/MainRoute.tsx
+++ b/src/ui/routes/MainRoute.tsx
@@ -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();