better code: use NavLink to style current item
Massimo Melina committed
Mar 12, 2022 at 15:20 UTC
b9728553ef67ca9482dc1fba6b543fdcc2f00bab
2 files changed
+8
-7
admin/src/App.ts
+1
-1
@@ -30,7 +30,7 @@ function Routed() {
30
const current = mainMenu.find(x => x.path === loc)
31
const title = current && (current.title || getMenuLabel(current))
32
return h(Box, { display: 'flex' },
33
- h(MainMenu, { current }),
33
+ h(MainMenu),
34
h(Box, {
35
component: 'main',
36
sx: {
admin/src/MainMenu.ts
+7
-6
@@ -4,7 +4,7 @@ import { createElement as h, FunctionComponent } from 'react';
4
import { List, ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material'
5
import { AccountTree, Logout, ManageAccounts, Monitor, Public, Settings, SvgIconComponent } from '@mui/icons-material'
6
import _ from 'lodash'
7
-import { Link } from 'react-router-dom'
7
+import { NavLink } from 'react-router-dom'
8
import MonitorPage from './MonitorPage'
9
import ConfigPage from './ConfigPage';
10
import VfsPage from './VfsPage';
@@ -29,16 +29,17 @@ export const mainMenu: MenuEntry[] = [
29
{ path: 'Logout', icon: Logout, comp: LogoutPage }
30
]
31
32
-interface MenuProps { current?:MenuEntry }
33
-export default function Menu({ current }: MenuProps) {
32
+export default function Menu() {
33
return h(List, { sx:{ pr:1, bgcolor: 'primary.main', color:'primary.contrastText' } },
34
h(Typography, { variant:'h4', sx:{ p:2 } }, 'HFS'),
35
mainMenu.map(it =>
36
h(ListItemButton, {
37
key: it.path,
39
- sx: current===it ? { textDecoration: 'underline' } : undefined,
40
- //@ts-ignore
41
- component: Link, to: it.path,
38
+ to: it.path,
39
+ component: NavLink,
40
+ // @ts-ignore
41
+ style: ({ isActive }) => isActive ? { textDecoration: 'underline' } : {},
42
+ children: undefined, // shut up ts
43
},
44
it.icon && h(ListItemIcon, { sx:{ color: 'primary.contrastText' } }, h(it.icon)),
45
h(ListItemText, { primary: getMenuLabel(it) })