M app/src/containers/EventMenu/index.js → app/src/containers/EventMenu/index.js

@@ -1,18 +1,20 @@ 
 import React from 'react';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
+import {makeStyles} from '@material-ui/core/styles';
 import {useTranslation} from 'react-i18next';
 import {useStrapi} from 'strapi-react-context';
 
 const EventMenu = ({anchorEl, setAnchorEl, actions = []}) => {
   const {t} = useTranslation();
   const strapi = useStrapi();
+  const classes = useStyles();
   const [settings] = strapi.stores?.settings || [{}];
-
   const aboutMenuItem = {
     label: t('menu.about'),
     onClick: () => (window.location.href = settings['about_link']),
     id: 'AboutTabs',
+    className: classes.withDivider,
   };
 
   return (
@@ -31,19 +33,28 @@ open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
     >
       {actions &&
-        [...actions, aboutMenuItem].filter(Boolean).map((action, idx) => (
-          <MenuItem
-            onClick={() => {
-              action.onClick();
-              setAnchorEl(null);
-            }}
-            key={idx}
-            id={action.id || `MenuItem${idx}`}
-          >
-            {action.label}
-          </MenuItem>
-        ))}
+        [...actions, aboutMenuItem]
+          .filter(Boolean)
+          .map(({label, id, onClick, ...attributes}, idx) => (
+            <MenuItem
+              onClick={() => {
+                onClick();
+                setAnchorEl(null);
+              }}
+              key={idx}
+              id={id || `MenuItem${idx}`}
+              {...attributes}
+            >
+              {label}
+            </MenuItem>
+          ))}
     </Menu>
   );
 };
+
+const useStyles = makeStyles(theme => ({
+  withDivider: {
+    borderTop: `1px solid ${theme.palette.divider}`,
+  },
+}));
 export default EventMenu;