Merge pull request #10356 from marmelab/doc-appbar-usermenu

[Doc] Fix `<AppBar userMenu>` example usage

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,7 +279,7 @@ const SettingsMenuItem = React.forwardRef((props, ref) => {
     );
 });
 
-const MyAppBar = () => (
+export const MyAppBar = () => (
     <AppBar
         userMenu={
             <UserMenu>