u

src/components/AppShell.jsx

@@ -8,6 +8,7 @@ import ButtonBase from '@mui/material/ButtonBase';
 import Typography from '@mui/material/Typography';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import UserMenu from './UserMenu';
+import HelpBadge from './HelpBadge';
 import { NAV_ITEMS, SUB_NAV, resolveActiveNav, resolveActiveSub } from '../nav';
 import { artikelQueryPath } from './article/artikelQuery';
 import { defaultCategoryPath } from './category/categoryRoute';
@@ -56,7 +57,7 @@ class AppSidebar extends PureComponent {
         })}
       >
         <List disablePadding sx={{ flexGrow: 1 }}>
-          {NAV_ITEMS.map(({ path, label, icon: Icon }) => {
+          {NAV_ITEMS.map(({ path, label, help, icon: Icon }) => {
             const active = path === activeNav;
 
             return (
@@ -106,7 +107,9 @@ class AppSidebar extends PureComponent {
                 })}
               >
                 <ListItemIcon sx={{ minWidth: 36 }}>
-                  <Icon />
+                  <HelpBadge title={label} help={help} placement="right">
+                    <Icon />
+                  </HelpBadge>
                 </ListItemIcon>
                 <ListItemText primary={label} />
               </ListItemButton>
@@ -153,7 +156,7 @@ class AppSubNav extends PureComponent {
           py: 4,
         }}
       >
-        {subNav.map(({ segment, label, icon: Icon }) => {
+        {subNav.map(({ segment, label, title, help, icon: Icon }) => {
           const active = segment === activeSub;
 
           return (
@@ -195,7 +198,9 @@ class AppSubNav extends PureComponent {
                 },
               })}
             >
-              <Icon sx={{ fontSize: 32 }} />
+              <HelpBadge title={title || label} help={help} placement="right">
+                <Icon sx={{ fontSize: 32 }} />
+              </HelpBadge>
               {label ? (
                 <Typography
                   variant="caption"