From 190415c821478431112b4d5c77f9e4ba78b7125f Mon Sep 17 00:00:00 2001
From: Sajad Mirjalili <sajadmrjll@gmail.com>
Date: Mon, 29 Sep 2025 17:25:20 +0330
Subject: [PATCH] fix: remove avatar from toolbar and add to sidenav header

---
 src/components/layout/Header.tsx  | 28 +++++++++++++++++++---------
 src/components/layout/Toolbar.tsx | 12 ------------
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 94b60a1..c0f5b7b 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,4 +1,5 @@
 import {
+  Avatar,
   Box,
   IconButton,
   ListItemIcon,
@@ -14,6 +15,7 @@ import { LTRTypography } from '../common/LTRTypography';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAuth } from '@/hooks/useAuth';
+import { FlexBox } from '../common/FlexBox';
 
 interface HeaderProps {
   user: UserInfo;
@@ -52,15 +54,23 @@ export const Header: React.FC<HeaderProps> = ({ user }) => {
           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>
+        <FlexBox sx={{ alignItems: 'center', gap: 1 }}>
+          <Avatar
+            sx={{ width: 32, height: 32, fontSize: '14px' }}
+            src={user.picture}
+          >
+            {user.firstName.charAt(0) + ' ' + user.lastName.charAt(0)}
+          </Avatar>
+          <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>
+        </FlexBox>
 
         <IconButton onClick={handleClick} color="primary">
           <Icon Component={More} />
diff --git a/src/components/layout/Toolbar.tsx b/src/components/layout/Toolbar.tsx
index ba84948..1ca8270 100644
--- a/src/components/layout/Toolbar.tsx
+++ b/src/components/layout/Toolbar.tsx
@@ -63,21 +63,9 @@ export const Toolbar: React.FC<ToolbarProps> = ({
         )}
         <Logo />
       </Box>
-      <Box
-        sx={{ display: 'flex', height: '100%', alignItems: 'center', gap: 1 }}
-      >
-        {isMobile && (
-          <Avatar
-            sx={{ width: 32, height: 32, fontSize: '14px' }}
-            src={user.picture}
-          >
-            {user.firstName.charAt(0) + ' ' + user.lastName.charAt(0)}
-          </Avatar>
-        )}
         <IconButton color="primary" onClick={handleClick}>
           <Icon Component={Menu} variant="Bold" />
         </IconButton>
-      </Box>
       <ProductsMenu anchorEl={anchorEl} onClose={handleClose} open={open} />
     </MuiToolbar>
   );