fix: layout menues

src/components/Layout/Header.tsx

@@ -1,34 +1,100 @@
-import { Box, IconButton, Typography } from '@mui/material';
+import {
+  Box,
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Typography,
+} from '@mui/material';
 import { Icon } from '@rkheftan/harmony-ui';
-import { More } from 'iconsax-react';
+import { Logout, More } from 'iconsax-react';
 import type { UserInfo } from '@/contexts/AuthContext';
 import { LTRTypography } from '../common/LTRTypography';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAuth } from '@/hooks/useAuth';
 
 interface HeaderProps {
   user: UserInfo;
 }
 
 export const Header: React.FC<HeaderProps> = ({ user }) => {
-  return (
-    <Box
-      sx={{
-        p: 2,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        height: (t) => t.spacing(10.5),
-      }}
-    >
-      <Box>
-        <Typography variant="body1">{user.fullName}</Typography>
-        <LTRTypography variant="body2" color="textSecondary">
-          {user.phoneNumber ?? user.email}
-        </LTRTypography>
-      </Box>
+  const { t, i18n } = useTranslation('sideNav');
 
-      <IconButton>
-        <Icon Component={More} />
-      </IconButton>
-    </Box>
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const { logout } = useAuth();
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleLogout = () => {
+    handleClose();
+    logout();
+  };
+
+  return (
+    <>
+      <Box
+        sx={{
+          p: 2,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          height: (t) => t.spacing(10.5),
+        }}
+      >
+        <Box>
+          <Typography variant="body1" color="textSecondary">
+            {user.fullName}
+          </Typography>
+          {/* TODO: add ternary text color to palette */}
+          <LTRTypography variant="body2" color="#757575">
+            {user.phoneNumber ?? user.email}
+          </LTRTypography>
+        </Box>
+
+        <IconButton onClick={handleClick} color="primary">
+          <Icon Component={More} />
+        </IconButton>
+      </Box>
+      <Menu
+        id="account-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: i18n.dir() === 'rtl' ? 'right' : 'left',
+        }}
+      >
+        <MenuItem
+          sx={{
+            color: 'error.main',
+            '& .MuiListItemIcon-root': {
+              color: 'error.main',
+            },
+          }}
+          onClick={handleLogout}
+        >
+          <ListItemIcon>
+            <Icon Component={Logout} />
+          </ListItemIcon>
+          <ListItemText>{t('header.logout')}</ListItemText>
+        </MenuItem>
+      </Menu>
+    </>
   );
 };

src/components/Layout/ProductsMenu.tsx

@@ -0,0 +1,96 @@
+import { Menu, Stack, Typography, Box, Button } from '@mui/material';
+import { blue } from '@mui/material/colors';
+import { Icon } from '@rkheftan/harmony-ui';
+import { ArrowLeft, ArrowRight } from 'iconsax-react';
+import { useTranslation } from 'react-i18next';
+import { productsData } from '@/data/products';
+
+// --- Props Interface ---
+interface ProductsMenuProps {
+  anchorEl: Element | null;
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function ProductsMenu({
+  anchorEl,
+  open,
+  onClose,
+}: ProductsMenuProps) {
+  const { t, i18n } = useTranslation('setting');
+
+  return (
+    <Menu
+      id="products-menu"
+      anchorEl={anchorEl}
+      open={open}
+      onClose={onClose}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'center',
+      }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: i18n.dir() === 'rtl' ? 'left' : 'right',
+      }}
+      sx={{
+        '& .MuiMenu-list': {
+          py: 0,
+        },
+        '& .MuiPaper-root': {
+          borderRadius: 2,
+          width: 376,
+        },
+      }}
+    >
+      {/* 1. Header Link */}
+      <Box sx={{ px: 2, py: 1, bgcolor: blue[50] }}>
+        <Typography variant="body2" color="primary.main">
+          {t('products.menu.title')}
+        </Typography>
+      </Box>
+
+      <Box sx={{ px: 2, py: 1 }}>
+        {/* 2. Map through products to create MenuItems */}
+        {productsData.map((product) => (
+          <Stack
+            key={product.id}
+            direction="row"
+            spacing={2}
+            alignItems="center"
+            width="100%"
+          >
+            {/* Text Content */}
+            <Stack minWidth={0} direction="column" spacing={0.5} flexGrow={1}>
+              <Typography variant="h6">{t(product.titleKey)}</Typography>
+              <Typography variant="body2" color="text.secondary">
+                {t(product.descriptionKey)}
+              </Typography>
+              <Button
+                type="link"
+                href={product.demoLink}
+                variant="text"
+                color="club"
+                endIcon={
+                  <Icon
+                    Component={i18n.dir() === 'ltr' ? ArrowRight : ArrowLeft}
+                  />
+                }
+                sx={{
+                  alignSelf: 'flex-start',
+                  width: 'unset',
+                }}
+              >
+                {t('products.menu.getDemo')}
+              </Button>
+            </Stack>
+
+            <Box sx={{ width: 69 }}>
+              <product.LogoComponent />
+            </Box>
+          </Stack>
+        ))}
+      </Box>
+    </Menu>
+  );
+}

src/components/Layout/Toolbar.tsx

@@ -1,9 +1,10 @@
 import { Avatar, Box, IconButton, Toolbar as MuiToolbar } from '@mui/material';
 import { Icon } from '@rkheftan/harmony-ui';
 import { HambergerMenu, Menu } from 'iconsax-react';
-import type { Dispatch, SetStateAction } from 'react';
+import { useState, type Dispatch, type SetStateAction } from 'react';
 import type { UserInfo } from '@/contexts/AuthContext';
 import Logo from '../Logo';
+import ProductsMenu from './ProductsMenu';
 
 interface ToolbarProps {
   sideNavOpen: boolean;
@@ -18,6 +19,18 @@ export const Toolbar: React.FC<ToolbarProps> = ({
   isMobile,
   user,
 }) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
   return (
     <MuiToolbar
       sx={{
@@ -61,10 +74,11 @@ export const Toolbar: React.FC<ToolbarProps> = ({
             {user.firstName.charAt(0) + ' ' + user.lastName.charAt(0)}
           </Avatar>
         )}
-        <IconButton>
+        <IconButton color="primary" onClick={handleClick}>
           <Icon Component={Menu} variant="Bold" />
         </IconButton>
       </Box>
+      <ProductsMenu anchorEl={anchorEl} onClose={handleClose} open={open} />
     </MuiToolbar>
   );
 };

src/data/products.ts

@@ -0,0 +1,21 @@
+import Logo from '@/components/Logo';
+import { type FC } from 'react';
+
+export interface Product {
+  id: string;
+  titleKey: string;
+  descriptionKey: string;
+  LogoComponent: FC;
+  demoLink: string;
+}
+
+export const productsData: Product[] = [
+  {
+    id: 'harmony-club',
+    titleKey: 'products.harmonyClub.title',
+    descriptionKey: 'products.harmonyClub.description',
+    LogoComponent: Logo, // Reference the component
+    demoLink: '', // FIXME: update this url
+  },
+  // add more products here
+];

src/features/profile/components/userInformation/PersonalInformation.tsx

@@ -53,7 +53,6 @@ export function PersonalInformation() {
             ? `${imageBaseUrl}/${profileData.profileImageUrl}`
             : null,
         );
-        console.log(uploadedImageUrl);
         setUploadedImageFile(null);
       } else {
         showToast({