From c216894a406af4256940de866582ac4eab7b6555 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Tue, 30 Jun 2020 14:36:25 +0200
Subject: [PATCH] Fix LogoutButton should not render as a li in Mobile menu

Closes #4968
---
 packages/ra-ui-materialui/src/auth/Logout.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/ra-ui-materialui/src/auth/Logout.tsx b/packages/ra-ui-materialui/src/auth/Logout.tsx
index 631d1ebf0a2..b85c62c3e60 100644
--- a/packages/ra-ui-materialui/src/auth/Logout.tsx
+++ b/packages/ra-ui-materialui/src/auth/Logout.tsx
@@ -1,7 +1,12 @@
 import * as React from 'react';
 import { useCallback, FunctionComponent, ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import { ListItemIcon, MenuItem, makeStyles } from '@material-ui/core';
+import {
+    ListItemIcon,
+    MenuItem,
+    useMediaQuery,
+    makeStyles,
+} from '@material-ui/core';
 import { MenuItemProps } from '@material-ui/core/MenuItem';
 import { Theme } from '@material-ui/core/styles';
 
@@ -41,6 +46,9 @@ const LogoutWithRef: FunctionComponent<
         ...rest
     } = props;
     const classes = useStyles(props);
+    const isXSmall = useMediaQuery((theme: Theme) =>
+        theme.breakpoints.down('xs')
+    );
     const translate = useTranslate();
     const logout = useLogout();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -53,6 +61,7 @@ const LogoutWithRef: FunctionComponent<
             className={classnames('logout', classes.menuItem, className)}
             onClick={handleClick}
             ref={ref}
+            component={isXSmall ? 'span' : 'li'}
             {...rest}
         >
             <ListItemIcon className={classes.icon}>