fix: remove avatar from toolbar and add to sidenav header

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>
+        <FlexBox sx={{ alignItems: 'center', gap: 1 }}>
-          <Typography variant="body1" color="textSecondary">
+          <Avatar
-            {user.fullName}
+            sx={{ width: 32, height: 32, fontSize: '14px' }}
-          </Typography>
+            src={user.picture}
-          {/* TODO: add ternary text color to palette */}
+          >
-          <LTRTypography variant="body2" color="#757575">
+            {user.firstName.charAt(0) + ' ' + user.lastName.charAt(0)}
-            {user.phoneNumber ?? user.email}
+          </Avatar>
-          </LTRTypography>
+          <Box>
-        </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} />

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>
   );