invoice bg cover service

src/shared/Header.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react'
 import Input from '../components/Input'
-import { ArrowDown2, CloseCircle, Element3, HambergerMenu, Logout, Wallet } from 'iconsax-react'
+import { ArrowDown2, CloseCircle, HambergerMenu, Logout, Wallet } from 'iconsax-react'
 import AvatarImage from '../assets/images/avatar_image.png'
 import { useTranslation } from 'react-i18next'
 import { Link, useLocation } from 'react-router-dom'
@@ -9,7 +9,7 @@ import Notifications from '../pages/notification/Notification'
 import { useSharedStore } from './store/sharedStore'
 import { useGetProfile } from '../pages/profile/hooks/useProfileData'
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
-import SideBarItem from './SideBarItem'
+import { removeRefreshToken, removeToken } from '../config/func'
 
 const Header: FC = () => {
 
@@ -23,6 +23,12 @@ const Header: FC = () => {
         setPopoverKey((prevKey) => prevKey + 1);
     }, [location.pathname]);
 
+    const handleLogout = () => {
+        removeToken()
+        removeRefreshToken()
+        window.location.href = Pages.auth.login
+    }
+
     return (
         <div className='fixed z-10 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]'>
 
@@ -37,9 +43,6 @@ const Header: FC = () => {
             </div>
             {/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
             <div className='flex xl:gap-6 gap-4 items-center'>
-                <Link to={Pages.services.other}>
-                    <Element3 color='black' className='xl:size-[18px] size-[17px]' />
-                </Link>
                 <Link className='xl:hidden' to={Pages.wallet}>
                     <Wallet className='xl:size-[18px] size-[17px]' color='black' />
                 </Link>
@@ -79,14 +82,13 @@ const Header: FC = () => {
                                     </div>
                                 </Link>
 
-                                <div className='px-6 -mt-[2px]'>
-                                    <SideBarItem
-                                        icon={<Logout color={'black'} size={20} />}
-                                        title={t('sidebar.logout')}
-                                        isActive
-                                        link={Pages.setting}
-                                        isLogout
-                                    />
+                                <div className='px-6 mt-2'>
+                                    <div onClick={() => handleLogout()} className='flex gap-2 items-center cursor-pointer'>
+                                        <Logout size={20} color='black' />
+                                        <div>
+                                            {t('sidebar.logout')}
+                                        </div>
+                                    </div>
                                 </div>
 
                             </PopoverPanel>