fix(user menu): full height user menu

CHANGELOG.md

@@ -22,6 +22,9 @@
 - Business Partner Details
   - Show certificate information which are associated with the bpn number.
   - Activate on hover and click action to download the corresponding certificate
+- Hamburger
+  - Full height user menu
+  - Click outside to close menu
 
 ## 1.8.0-RC6
 

src/components/pages/Home/components/MenuInfo/index.tsx

@@ -52,17 +52,22 @@ export const MenuInfo = ({ main }: { main: Tree[] }) => {
         flexShrink: 0,
         '& .MuiDrawer-paper': {
           width: '280px',
-          background: 'transparent',
           borderColor: 'transparent',
+          boxShadow: '0px 0px 30px 1px rgb(0 0 0 / 40%)',
+        },
+        '& .MuiBackdrop-root': {
+          backgroundColor: 'transparent',
         },
       }}
-      variant="persistent"
       anchor="right"
       open={visible}
+      onClose={() => {
+        dispatch(setAppear({ MENU: !visible }))
+      }}
     >
       <ClickAwayListener
         onClickAway={() => {
-          // visible && dispatch(setAppear({ MENU: !visible }))
+          // do nothing
         }}
       >
         <div className="MenuInfo">

src/components/pages/Home/components/MenuInfo/menu-info.scss

@@ -26,7 +26,7 @@
   right: 0px;
   width: 280px;
   padding: 10px 0px;
-  box-shadow: 0px 0px 30px 1px rgb(0 0 0 / 40%);
+  height: 99%;
 }
 
 .closeIcon {

src/components/shared/MobileMenu/index.tsx

@@ -41,6 +41,7 @@ import { type CompanyMenuTypes, MyCompanyLink } from './MyCompanyLink'
 import { MenuSubItems } from './MenuChildren'
 import { MenuFooter } from './MenuFooter'
 import { t } from 'i18next'
+import { PAGES } from 'types/Constants'
 
 export interface MenuProps extends BoxProps {
   items: MenuItemProps[]
@@ -89,45 +90,57 @@ export const MobileMenu = ({
   }, [companyData])
 
   return (
-    <Box {...props}>
-      {children.length === 0 && (
-        <>
-          <List sx={{ padding: 0 }}>
-            {items?.map((item) => (
-              <MenuItem
-                {...item}
-                component={component}
-                menuProps={props}
-                Menu={MobileMenu}
-                onSelect={onSelectItem}
-                onClick={onClick}
-                key={uniqueId('Menu')}
-              />
-            ))}
-          </List>
-          {divider && <Divider sx={{ margin: spacing(0, 1) }} />}
-          <ProfileLink to={'/account'} />
-          <NotificationLink to={'/notifications'} />
-          <MyCompanyLink companyMenu={companyMenu} onSelect={onSelectItem} />
-          {divider && <Divider sx={{ margin: spacing(0, 1) }} />}
-        </>
-      )}
-      {children?.length > 0 && (
-        <MenuSubItems
-          title={selectedSection}
-          onClick={() => {
-            dispatch(setAppear({ MENU: !visible }))
-          }}
-          onHide={() => {
-            setSelectedChildren([])
-          }}
-          component={component}
-        >
-          {children}
-        </MenuSubItems>
-      )}
-      {divider && <Divider sx={{ margin: spacing(0, 1) }} />}
-      <MenuFooter />
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        justifyContent: 'space-between',
+      }}
+      {...props}
+    >
+      <Box>
+        {children.length === 0 && (
+          <>
+            <List sx={{ padding: 0 }}>
+              {items?.map((item) => (
+                <MenuItem
+                  {...item}
+                  component={component}
+                  menuProps={props}
+                  Menu={MobileMenu}
+                  onSelect={onSelectItem}
+                  onClick={onClick}
+                  key={uniqueId('Menu')}
+                />
+              ))}
+            </List>
+            {divider && <Divider sx={{ margin: spacing(0, 1) }} />}
+            <ProfileLink to={PAGES.ACCOUNT} />
+            <NotificationLink to={PAGES.NOTIFICATIONS} />
+            <MyCompanyLink companyMenu={companyMenu} onSelect={onSelectItem} />
+            {divider && <Divider sx={{ margin: spacing(0, 1) }} />}
+          </>
+        )}
+        {children?.length > 0 && (
+          <MenuSubItems
+            title={selectedSection}
+            onClick={() => {
+              dispatch(setAppear({ MENU: !visible }))
+            }}
+            onHide={() => {
+              setSelectedChildren([])
+            }}
+            component={component}
+          >
+            {children}
+          </MenuSubItems>
+        )}
+      </Box>
+      <Box>
+        {divider && <Divider sx={{ margin: spacing(0, 1) }} />}
+        <MenuFooter />
+      </Box>
     </Box>
   )
 }

src/components/shared/templates/Templates.scss

@@ -32,7 +32,6 @@
 
   h4 {
     font-size: 16px;
-    text-transform: uppercase;
   }
 }