27112023

src/layout/MainLayout/Header/HeaderContent/Profile/ProfileTab.js

@@ -6,11 +6,13 @@ import { List, ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
 
 // assets
 import { EditOutlined, ProfileOutlined, LogoutOutlined, UserOutlined, WalletOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router';
 
 // ==============================|| HEADER PROFILE - PROFILE TAB ||============================== //
 
 const ProfileTab = ({ handleLogout }) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const navigate=useNavigate();
   const handleListItemClick = (event, index) => {
     setSelectedIndex(index);
   };
@@ -42,7 +44,12 @@ const ProfileTab = ({ handleLogout }) => {
         </ListItemIcon>
         <ListItemText primary="Billing" />
       </ListItemButton>
-      <ListItemButton selected={selectedIndex === 2} onClick={handleLogout}>
+      <ListItemButton selected={selectedIndex === 2} 
+      // onClick={handleLogout}
+      onClick={()=>{
+        navigate('/login')
+      }}
+      >
         <ListItemIcon>
           <LogoutOutlined />
         </ListItemIcon>

src/layout/MainLayout/Header/HeaderContent/Profile/index.js

@@ -15,7 +15,7 @@ import Transitions from 'components/@extended/Transitions';
 import IconButton from 'components/@extended/IconButton';
 
 import { ThemeMode } from 'config';
-import useAuth from 'hooks/useAuth';
+// import useAuth from 'hooks/useAuth';
 
 // assets
 import avatar1 from 'assets/images/users/avatar-1.png';
@@ -49,7 +49,7 @@ const Profile = () => {
   const theme = useTheme();
   const navigate = useNavigate();
 
-  const { logout, user } = useAuth();
+  // const { logout, user } = useAuth();
   const handleLogout = async () => {
     try {
       await logout();
@@ -105,7 +105,9 @@ const Profile = () => {
       >
         <Stack direction="row" spacing={2} alignItems="center" sx={{ p: 0.5 }}>
           <Avatar alt="profile user" src={avatar1} size="xs" />
-          <Typography variant="subtitle1">{user?.name}</Typography>
+          <Typography variant="subtitle1">
+            {/* {user?.name} */}
+            </Typography>
         </Stack>
       </ButtonBase>
       <Popper
@@ -147,7 +149,9 @@ const Profile = () => {
                         <Stack direction="row" spacing={1.25} alignItems="center">
                           <Avatar alt="profile user" src={avatar1} sx={{ width: 32, height: 32 }} />
                           <Stack>
-                            <Typography variant="h6">{user?.name}</Typography>
+                            <Typography variant="h6">
+                              {/* {user?.name} */}
+                              </Typography>
                             <Typography variant="body2" color="textSecondary">
                               UI/UX Designer
                             </Typography>

src/layout/MainLayout/Header/HeaderContent/index.js

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
 // material-ui
-import { Box, useMediaQuery } from '@mui/material';
+import { Box, useMediaQuery ,Stack} from '@mui/material';
 
 // project import
 import Search from './Search';
@@ -21,7 +21,10 @@ const HeaderContent = () => {
 
   return (
     <>
-      {!matchesXs && <Search />}
+      {/* {!matchesXs && <Search />} */}
+      <Stack
+        width='100%'
+        direction='row' justifyContent='flex-end' spacing={2} alignItems='center'>
       {!matchesXs && megaMenu}
       {matchesXs && <Box sx={{ width: '100%', ml: 1 }} />}
 
@@ -29,6 +32,7 @@ const HeaderContent = () => {
       <Message />
       {!matchesXs && <Profile />}
       {matchesXs && <MobileSection />}
+      </Stack>
     </>
   );
 };