Merge branch 'dev'

interface/src/components/layout/LayoutMenu.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { memo, useCallback, useContext, useState } from 'react';
 
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import AssessmentIcon from '@mui/icons-material/Assessment';
@@ -7,47 +7,24 @@ import ConstructionIcon from '@mui/icons-material/Construction';
 import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
 import LiveHelpIcon from '@mui/icons-material/LiveHelp';
 import MoreTimeIcon from '@mui/icons-material/MoreTime';
-import PersonIcon from '@mui/icons-material/Person';
 import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
 import SensorsIcon from '@mui/icons-material/Sensors';
 import SettingsIcon from '@mui/icons-material/Settings';
 import StarIcon from '@mui/icons-material/Star';
-import {
-  Avatar,
-  Box,
-  Button,
-  Divider,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Popover
-} from '@mui/material';
+import { Box, Divider, List, ListItemButton, ListItemText } from '@mui/material';
 
-import { LanguageSelector } from 'components/inputs';
 import LayoutMenuItem from 'components/layout/LayoutMenuItem';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 
-const LayoutMenu = () => {
-  const { me, signOut } = useContext(AuthenticatedContext);
+const LayoutMenuComponent = () => {
+  const { me } = useContext(AuthenticatedContext);
   const { LL } = useI18nContext();
-
-  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-
-  const open = Boolean(anchorEl);
-  const id = anchorEl ? 'app-menu-popover' : undefined;
-
   const [menuOpen, setMenuOpen] = useState(true);
 
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
+  const handleMenuToggle = useCallback(() => {
+    setMenuOpen((prev) => !prev);
+  }, []);
 
   return (
     <>
@@ -64,28 +41,13 @@ const LayoutMenu = () => {
         >
           <ListItemButton
             alignItems="flex-start"
-            onClick={() => setMenuOpen(!menuOpen)}
+            onClick={handleMenuToggle}
             sx={{
-              pt: 2.5,
-              pb: menuOpen ? 0 : 2.5,
               '&:hover, &:focus': { '& svg': { opacity: 1 } }
             }}
           >
             <ListItemText
               primary={LL.MODULES()}
-              // secondary={
-              //   LL.CUSTOMIZATIONS() +
-              //   ', ' +
-              //   LL.SCHEDULER() +
-              //   ', ' +
-              //   LL.CUSTOM_ENTITIES(0) +
-              //   '...'
-              // }
-              // secondaryTypographyProps={{
-              //   noWrap: true,
-              //   fontSize: 12,
-              //   color: menuOpen ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0.5)'
-              // }}
               sx={{ my: 0 }}
               slotProps={{
                 primary: {
@@ -147,66 +109,13 @@ const LayoutMenu = () => {
           to="/settings"
         />
         <LayoutMenuItem icon={LiveHelpIcon} label={LL.HELP()} to={`/help`} />
+        <Divider />
+        <LayoutMenuItem icon={AccountCircleIcon} label={me.username} to={`/user`} />
       </List>
-      <Divider />
-      <List>
-        <ListItem disablePadding>
-          <ListItemButton component="button" onClick={handleClick}>
-            <ListItemIcon sx={{ color: '#9e9e9e' }}>
-              <AccountCircleIcon />
-            </ListItemIcon>
-            <ListItemText sx={{ color: '#2196f3' }}>{me.username}</ListItemText>
-          </ListItemButton>
-        </ListItem>
-      </List>
-      <Popover
-        id={id}
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'center'
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'center'
-        }}
-      >
-        <Box
-          padding={2}
-          justifyContent="center"
-          flexDirection="column"
-          sx={{
-            borderRadius: 3,
-            border: '3px solid grey'
-          }}
-        >
-          <Button
-            variant="outlined"
-            fullWidth
-            color="primary"
-            onClick={() => signOut(true)}
-          >
-            {LL.SIGN_OUT()}
-          </Button>
-          <List>
-            <ListItem disablePadding>
-              <Avatar sx={{ bgcolor: '#9e9e9e', color: 'white' }}>
-                <PersonIcon />
-              </Avatar>
-              <ListItemText
-                sx={{ pl: 2, color: '#2196f3' }}
-                primary={me.username}
-                secondary={'(' + (me.admin ? LL.ADMINISTRATOR() : LL.GUEST()) + ')'}
-              />
-            </ListItem>
-          </List>
-          <LanguageSelector />
-        </Box>
-      </Popover>
     </>
   );
 };
 
+const LayoutMenu = memo(LayoutMenuComponent);
+
 export default LayoutMenu;