From f333b144fc8e7acf59c0ffc5da29334e588252bd Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Mon, 18 Nov 2024 12:48:37 +0100
Subject: [PATCH] [Doc] Fix `<AppBar userMenu>` example usage

---
 docs/AppBar.md | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/docs/AppBar.md b/docs/AppBar.md
index 6470bc2798f..40caba3cf17 100644
--- a/docs/AppBar.md
+++ b/docs/AppBar.md
@@ -248,20 +248,26 @@ The content of the user menu depends on the return value of `authProvider.getIde
 
 You can customize the user menu by passing a `userMenu` prop to the `<AppBar>` component.
 
-```jsx
+```tsx
 import * as React from 'react';
-import { AppBar, UserMenu, useUserMenu } from 'react-admin';
+import { AppBar, Logout, UserMenu, useUserMenu } from 'react-admin';
 import { MenuItem, ListItemIcon, ListItemText } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
+import { Link } from "react-router-dom";
 
 // It's important to pass the ref to allow Material UI to manage the keyboard navigation
-const SettingsMenuItem = React.forwardRef((props, ref) => {
-    // We are not using MenuItemLink so we retrieve the onClose function from the UserContext
-    const { onClose } = useUserMenu();
+const SettingsMenuItem = React.forwardRef<HTMLAnchorElement>((props, ref) => {
+    const userMenuContext = useUserMenu();
+    if (!userMenuContext) {
+        throw new Error("<SettingsMenuItem> should be used inside a <UserMenu>");
+    }
+    const { onClose } = userMenuContext;
     return (
         <MenuItem
             onClick={onClose}
             ref={ref}
+            component={Link}
+            to="/settings"
             // It's important to pass the props to allow Material UI to manage the keyboard navigation
             {...props}
         >
@@ -273,10 +279,10 @@ const SettingsMenuItem = React.forwardRef((props, ref) => {
     );
 });
 
-const MyAppBar = () => (
+export const MyAppBar = () => (
     <AppBar
         userMenu={
-            <UserMenu>
+              <UserMenu>
                 <SettingsMenuItem />
                 <Logout />
             </UserMenu>