[DEV-1239] Implementation of user profile mobile menu (#527)

* Implementation of user profile mobile menu * align styles to design * Create ninety-berries-promise.md
pagopa · Jan 11, 2024 · d0fbfb2 · d0fbfb2
1 parent 56fb867
commit d0fbfb2
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 68 deletions.
diff --git a/.changeset/ninety-berries-promise.md b/.changeset/ninety-berries-promise.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+[DEV-1239] Implementation of user profile mobile menu
diff --git a/apps/nextjs-website/src/components/molecules/MobileProfileMenu/MobileProfileMenu.tsx b/apps/nextjs-website/src/components/molecules/MobileProfileMenu/MobileProfileMenu.tsx
@@ -1,19 +1,26 @@
 'use client';
-import React, { useCallback, useState } from 'react';
+import { profileMenuItems } from '@/config';
+import EContainer from '@/editorialComponents/EContainer/EContainer';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
+
+import ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined';
+import CloseIcon from '@mui/icons-material/Close';
 import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
   IconButton,
-  Link as MuiLink,
-  Menu,
   MenuItem,
+  MenuList,
+  Link as MuiLink,
+  Typography,
   useTheme,
+  Stack,
+  useMediaQuery,
+  Theme,
 } from '@mui/material';
-import Typography from '@mui/material/Typography';
-import { useTranslations } from 'next-intl';
-import { Stack } from '@mui/system';
-import ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined';
-import { profileMenuItems } from '@/config';
-import EContainer from '@/editorialComponents/EContainer/EContainer';
-import Link from 'next/link';
 
 type MobileProfileMenuProps = {
   userFullName: string | null;
@@ -22,92 +29,123 @@ type MobileProfileMenuProps = {
 const MobileProfileMenu = ({ userFullName }: MobileProfileMenuProps) => {
   const { palette } = useTheme();
   const t = useTranslations('profile');
+  const isDesktop = useMediaQuery((theme: Theme) => theme.breakpoints.up('lg'));
 
-  const [menu, setMenu] = useState<HTMLElement | null>(null);
-  const open = Boolean(menu);
-
+  const [open, setOpen] = useState(false);
   const handleClose = () => {
-    setMenu(null);
+    setOpen(false);
   };
 
-  const handleClick = useCallback((event: React.MouseEvent<HTMLElement>) => {
-    setMenu(event.currentTarget);
+  const handleClick = useCallback(() => {
+    setOpen((prev) => !prev);
   }, []);
 
+  useEffect(() => {
+    if (isDesktop) {
+      setOpen(false);
+    }
+  }, [isDesktop]);
+
+  const items = (
+    <MenuList sx={{ flexDirection: 'column', gap: 2, width: 1 }}>
+      {profileMenuItems.map(({ label, href }, index: number) => (
+        <MenuItem key={index} onClick={handleClose} sx={{ p: 0 }}>
+          <MuiLink
+            component={Link}
+            href={href}
+            sx={{
+              alignSelf: 'stretch',
+              textDecoration: 'none',
+              color: palette.text.primary,
+              py: 1,
+              pl: 6,
+            }}
+          >
+            {t(label)}
+          </MuiLink>
+        </MenuItem>
+      ))}
+    </MenuList>
+  );
+
   return (
     <Stack
       sx={{
+        position: 'sticky',
+        top: 0,
+        zIndex: 101,
         display: { md: 'none' },
         backgroundColor: palette.grey[50],
-        position: 'relative',
+        borderBottom: `1px solid ${palette.divider}`,
+        width: 1,
       }}
-      flexGrow={1}
-      alignItems='center'
-      direction='row'
-      gap={1}
-      justifyContent='flex-start'
     >
       <EContainer>
         <Stack
           direction='row'
           alignItems='center'
           justifyContent='flex-start'
           onClick={handleClick}
-          sx={{ padding: 3 }}
+          sx={{ py: 2, cursor: 'pointer' }}
         >
-          <Typography variant='body2' sx={{ fontWeight: 600 }}>
-            {userFullName}
+          <Typography
+            variant='body2'
+            sx={{ fontWeight: 600, color: palette.primary.main }}
+          >
+            {t('title')}
           </Typography>
-          <IconButton size='small' sx={{ ml: 1 }}>
+          <IconButton size='small' sx={{ ml: 1, color: palette.primary.main }}>
             <ArrowDropDownOutlinedIcon
               sx={{ width: 24, height: 24 }}
             ></ArrowDropDownOutlinedIcon>
           </IconButton>
         </Stack>
       </EContainer>
 
-      <Menu
-        anchorEl={menu}
-        id='profile-menu'
-        open={open}
-        onClose={handleClose}
-        onClick={handleClose}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'left',
-        }}
-        sx={{
-          filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
-          ml: 1,
-        }}
-      >
-        {profileMenuItems.map(
-          ({ label, href }: { label: string; href: string }, index: number) => (
-            <MenuItem
-              key={index}
-              onClick={handleClose}
-              sx={{ flexDirection: 'column', p: 0 }}
+      {!isDesktop && (
+        <Dialog open={open} onClose={handleClick} fullScreen>
+          <DialogTitle
+            component={Stack}
+            direction='row'
+            alignItems='center'
+            justifyContent='flex-start'
+            sx={{
+              padding: '12px 24px',
+            }}
+          >
+            <Typography
+              variant='h6'
+              sx={{
+                flexGrow: 1,
+                flexShrink: 0,
+                fontSize: '16px!important',
+                verticalAlign: 'middle',
+                color: palette.primary.main,
+              }}
+            >
+              {t('title')}
+            </Typography>
+            <IconButton
+              aria-label='close'
+              onClick={handleClick}
+              sx={{
+                color: palette.primary.main,
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </DialogTitle>
+          <DialogContent sx={{ px: 0 }}>
+            <Typography
+              variant='h6'
+              sx={{ fontSize: '22px', fontWeight: 700, padding: '12px 24px' }}
             >
-              <MuiLink
-                component={Link}
-                href={href}
-                sx={{
-                  alignSelf: 'stretch',
-                  textDecoration: 'none',
-                  color: palette.text.primary,
-                  p: 2,
-                }}
-              >
-                {t(label)}
-              </MuiLink>
-            </MenuItem>
-          )
-        )}
-      </Menu>
+              {userFullName}
+            </Typography>
+            {items}
+          </DialogContent>
+        </Dialog>
+      )}
     </Stack>
   );
 };

diff --git a/apps/nextjs-website/src/components/organisms/ProfileMenu/ProfileMenu.tsx b/apps/nextjs-website/src/components/organisms/ProfileMenu/ProfileMenu.tsx
@@ -33,7 +33,7 @@ const ProfileMenu = ({ children }: { children: ReactNode }) => {
     <>
       <MobileProfileMenu userFullName={userFullName} />
       <EContainer>
-        <Box sx={{ display: 'flex' }}>
+        <Box sx={{ display: 'flex', mt: { xs: '60px', md: 0 } }}>
           <DesktopProfileMenu
             currentPathname={pathname}
             userFullName={userFullName}

diff --git a/apps/nextjs-website/src/messages/it.json b/apps/nextjs-website/src/messages/it.json
@@ -8,6 +8,7 @@
         "title": "DevPortal"
     },
     "profile": {
+        "title": "Profilo",
         "agreements": {
             "newsletter": {
                 "description": "Inviami e-mail relative alle risorse e agli aggiornamenti sui prodotti. Se questa opzione è attiva, PagoPA ti invierà di tanto in tanto delle e-mail utili e pertinenti.",