header and notification

2025-07-20 10:12:31 +03:30
parent 27fc6b765c
commit 4f3976bfe8
17 changed files with 677 additions and 102 deletions
@@ -0,0 +1,15 @@
+import { FC } from 'react'
+
+type Props = {
+    color: string
+}
+
+const StatusCircle: FC<Props> = (props: Props) => {
+    return (
+        <div style={{ background: props.color }} className='size-1.5 rounded-full'>
+
+        </div>
+    )
+}
+
+export default StatusCircle
@@ -8,10 +8,9 @@ interface UseEmailWebSocketOptions {
  onDisconnect?: () => void;
  onError?: (error: string) => void;
 }
-
 export const useEmailWebSocket = ({
  token,
-  serverUrl = `ws://${import.meta.env.VITE_BASE_URL}/email`,
+  serverUrl = import.meta.env.VITE_SOCKET_URL,
  onConnect,
  onDisconnect,
  onError,
@@ -341,3 +341,10 @@ textarea::placeholder {
  /* حفظ padding های جدول */
  padding: 8px;
 }
+
+.modalGlass3 {
+  background: rgba(62, 61, 61, 0.2);
+  background-blend-mode: multiply;
+
+  backdrop-filter: blur(44px);
+}
@@ -15,7 +15,9 @@
    "new_message": "پیام جدید"
  },
  "header": {
-    "search": "جستجو"
+    "search": "جستجو",
+    "profile": "پروفایل",
+    "setting": "تنظیمات"
  },
  "errors": {
    "required": "این فیلد اجباری است",
@@ -63,6 +65,10 @@
    "unread": "خوانده نشده",
    "search": "جستجو"
  },
+  "notif": {
+    "natification": "اعلان ها",
+    "all_read": "خواندن همه"
+  },
  "setting": {
    "title": "تنظیمات",
    "personality": "شخصی سازی",
@@ -0,0 +1,172 @@
+import { CloseCircle, Notification } from 'iconsax-react';
+import { FC, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { clx } from '../../helpers/utils';
+import StatusCircle from '../../components/StatusCircle';
+import { useOutsideClick } from '../../hooks/useOutSideClick';
+import { useGetNotification, useReadAll } from './hooks/useNotificationData';
+import { NotificationItemType, NotificationTypeEnum } from './types/NotificationTypes';
+import { timeAgo } from '../../config/func';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import MoonLoader from "react-spinners/MoonLoader"
+import Button from '../../components/Button';
+import { toast } from '../../components/Toast';
+// import { useNavigate } from 'react-router-dom';
+import { ErrorType } from '../../helpers/types';
+const Notifications: FC = () => {
+    // const navigate = useNavigate()
+    const { t } = useTranslation();
+    const ref = useOutsideClick(() => setShowModal(false));
+    const [activeTab, setActiveTab] = useState<'read' | 'unread'>('unread');
+    const [showModal, setShowModal] = useState<boolean>(false);
+    const { data, fetchNextPage, hasNextPage, refetch } = useGetNotification(activeTab);
+    const readAll = useReadAll()
+    const posts = data?.pages.flatMap((page) => page.data?.notifications) || [];
+
+    const handleAllRead = () => {
+        readAll.mutate(undefined, {
+            onSuccess: () => {
+                refetch()
+                toast(t('success'), 'success')
+            },
+            onError: (error: ErrorType) => {
+                toast(error.response?.data?.error?.message[0], 'error')
+            }
+        })
+    }
+
+    const handleRedirect = (type: NotificationTypeEnum) => {
+        switch (type) {
+            case NotificationTypeEnum.USER_LOGIN:
+                break;
+            // case NotificationTypeEnum.ANNOUNCEMENT:
+            //     navigate(Pages.announcement.list)
+            //     break;
+            // case NotificationTypeEnum.WALLET_CHARGE:
+            //     navigate(Pages.transactions)
+            //     break;
+            // case NotificationTypeEnum.WALLET_DEDUCTION:
+            //     navigate(Pages.transactions)
+            //     break;
+            // case NotificationTypeEnum.BILL_INVOICE_REMINDER:
+            //     navigate(Pages.receipts.index)
+            //     break;
+            // case NotificationTypeEnum.BILL_INVOICE:
+            //     navigate(Pages.receipts.index)
+            //     break;
+            // case NotificationTypeEnum.CREATE_INVOICE:
+            //     navigate(Pages.receipts.index)
+            //     break;
+            // case NotificationTypeEnum.CREATE_SERVICE:
+            //     navigate(Pages.services.other)
+            //     break;
+            // case NotificationTypeEnum.UNBLOCK_SERVICE:
+            //     navigate(Pages.services.other)
+            //     break;
+            // case NotificationTypeEnum.BLOCK_SERVICE:
+            //     navigate(Pages.services.other)
+            //     break;
+            // case NotificationTypeEnum.ANSWER_TICKET:
+            //     navigate(Pages.ticket.list)
+            //     break;
+            // case NotificationTypeEnum.CREATE_TICKET:
+            //     navigate(Pages.ticket.list)
+            //     break;
+            default:
+                break
+        }
+        setShowModal(false)
+    }
+
+    return (
+        <div ref={ref}>
+            <div onClick={() => setShowModal(!showModal)} className='relative cursor-pointer'>
+                <Notification size={18} color="black" />
+                {/* <div className="absolute top-0 right-0 -mt-1 -mr-1 rounded-full bg-red-500 text-white text-[8px] size-3 flex pt-0.5 pl-[1px] justify-center items-center">
+                    {getDashboard.data?.data?.notificationCount}
+                </div> */}
+            </div>
+
+            {showModal && (
+                <div id='notificationsContainer' className="xl:h-[calc(100%-110px)] h-[70%] p-6 z-50 xl:w-[300px] w-full xl:left-7 left-0 xl:top-[90px] top-0 overflow-y-auto xl:rounded-3xl rounded-b-3xl rounded-t-none fixed modalGlass3 ">
+                    <div className="flex justify-between items-center">
+                        <div>{t('notif.natification')}</div>
+                        <div className="size-7 rounded-full bg-white/30 flex justify-center items-center">
+                            <CloseCircle size={20} color="black" onClick={() => setShowModal(false)} />
+                        </div>
+                    </div>
+
+
+
+                    <div className="mt-6 flex h-8 border border-white border-opacity-35 text-xs rounded-lg overflow-hidden">
+                        <div
+                            onClick={() => setActiveTab('unread')}
+                            className={clx(
+                                'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 bg-transparent flex justify-center items-center',
+                                activeTab === 'unread' ? 'bg-white/70 text-black' : ''
+                            )}
+                        >
+                            خوانده نشده
+                        </div>
+                        <div
+                            onClick={() => setActiveTab('read')}
+                            className={clx(
+                                'flex-1 cursor-pointer text-white border-white bg-transparent flex justify-center items-center',
+                                activeTab === 'read' ? 'bg-white/70 text-black' : ''
+                            )}
+                        >
+                            خوانده شده
+                        </div>
+                    </div>
+
+                    <div className='flex mt-4 justify-end'>
+                        <Button
+                            loading={readAll.isPending}
+                            onClick={handleAllRead}
+                            className={clx(
+                                'flex-1 border bg-transparent text-xs h-7 rounded-md cursor-pointer text-white border-white border-opacity-70 flex justify-center items-center',
+                            )}
+                        >
+                            {t('notif.all_read')}
+                        </Button>
+                    </div>
+
+                    <div className="mt-6 flex flex-col gap-4 text-xs overflow-auto">
+                        <InfiniteScroll
+                            dataLength={posts.length}
+                            next={fetchNextPage}
+                            hasMore={hasNextPage}
+                            loader={<div className='flex justify-center'><MoonLoader color="black" size={20} /></div>}
+                            scrollableTarget="notificationsContainer"
+                        >
+                            {
+                                posts.map((item: NotificationItemType) => (
+                                    <div onClick={() => handleRedirect(item.type)} className="bg-white cursor-pointer h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 mb-4 flex" key={item.id}>
+                                        {
+                                            !item.isRead &&
+                                            <div className="mt-1">
+                                                <StatusCircle color="#00BA4B" />
+                                            </div>
+                                        }
+                                        <div>
+                                            <div className="truncate max-w-[200px]">{item.message}</div>
+                                            <div className="mt-2 flex gap-2 text-[10px] text-description">
+                                                <div>{timeAgo(item.createdAt)}</div>
+                                                <div className="flex gap-1 items-center">
+                                                    <StatusCircle color="#8C90A3" />
+                                                    <div>{item.title}</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))
+                            }
+                        </InfiniteScroll>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Notifications;
@@ -0,0 +1,22 @@
+import * as api from "../service/NotificationService";
+import { useInfiniteQuery, useMutation } from "@tanstack/react-query";
+
+export const useGetNotification = (status: "all" | "read" | "unread") => {
+  return useInfiniteQuery({
+    queryKey: ["notifications", status],
+    queryFn: ({ pageParam = 1 }) => api.getNotifications(pageParam, status), // فراخوانی API برای گرفتن داده‌ها
+    initialPageParam: 1, // صفحه اول به طور پیشفرض
+    getNextPageParam: (lastPage) => {
+      const currentPage = lastPage.data?.pager.page;
+      const totalPages = lastPage.data?.pager.totalPages;
+
+      return currentPage < totalPages ? currentPage + 1 : undefined;
+    },
+  });
+};
+
+export const useReadAll = () => {
+  return useMutation({
+    mutationFn: (_) => api.readAll(),
+  });
+};
@@ -0,0 +1,18 @@
+import axios from "../../../config/axios";
+
+export const getNotifications = async (
+  page: number,
+  status: "all" | "read" | "unread"
+) => {
+  let query = ``;
+  if (status !== "all") {
+    query = `&isRead=${status === "read" ? 1 : 0}`;
+  }
+  const { data } = await axios.get(`/notifications?page=${page}${query}`);
+  return data;
+};
+
+export const readAll = async () => {
+  const { data } = await axios.patch(`/notifications/read-all`);
+  return data;
+};
@@ -0,0 +1,31 @@
+export type NotificationItemType = {
+  id: string;
+  title: string;
+  message: string;
+  createdAt: string;
+  isRead: boolean;
+  type: NotificationTypeEnum;
+};
+
+export enum NotificationTypeEnum {
+  USER_LOGIN = "USER_LOGIN",
+  ANNOUNCEMENT = "ANNOUNCEMENT",
+
+  // Finance category
+  WALLET_CHARGE = "WALLET_CHARGE",
+  WALLET_DEDUCTION = "WALLET_DEDUCTION",
+
+  //Invoice
+  BILL_INVOICE_REMINDER = "BILL_INVOICE_REMINDER",
+  BILL_INVOICE = "BILL_INVOICE",
+  CREATE_INVOICE = "CREATE_INVOICE",
+
+  // Service category
+  CREATE_SERVICE = "CREATE_SERVICE",
+  UNBLOCK_SERVICE = "UNBLOCK_SERVICE",
+  BLOCK_SERVICE = "BLOCK_SERVICE",
+
+  // Support category
+  ANSWER_TICKET = "ANSWER_TICKET",
+  CREATE_TICKET = "CREATE_TICKET",
+}
@@ -0,0 +1,9 @@
+import { useQuery } from "@tanstack/react-query";
+import * as api from "../service/Service";
+
+export const useGetProfile = () => {
+  return useQuery({
+    queryKey: ["profile"],
+    queryFn: api.getProfile,
+  });
+};
@@ -0,0 +1,6 @@
+import axios from "@/config/axios";
+
+export const getProfile = async () => {
+  const { data } = await axios.get("/users/me");
+  return data;
+};
@@ -1,73 +1,184 @@
 import { FC, useEffect, useState } from 'react'
 import Input from '../components/Input'
-import { Element3, HambergerMenu, Wallet } from 'iconsax-react'
+import { ArrowDown2, CloseCircle, HambergerMenu, Logout, ProfileCircle, SearchNormal, Setting2 } from 'iconsax-react'
 import { useTranslation } from 'react-i18next'
-import { Link, useLocation, useNavigate } from 'react-router-dom'
-import { Paths } from '@/utils/Paths'
-import { EmailNotifications } from '@/components/EmailNotifications'
+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 { useGetWalletBalance } from '../pages/wallet/hooks/useWalletData'
-// import { NumberFormat } from '../config/func'
+import { useGetProfile } from '../pages/profile/hooks/useProfileData'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
+import { Link } from 'react-router-dom'
+import { Paths } from '@/utils/Paths'
+import SideBarItem from './SideBarItem'
+import AvatarImage from '../assets/images/avatar_image.png'

 const Header: FC = () => {

-    const location = useLocation();
-    const navigate = useNavigate();
    const [popoverKey, setPopoverKey] = useState(0);
+    const { data } = useGetProfile()
+    const [search, setSearch] = useState<string>('')
+    const [showSearchResults, setShowSearchResults] = useState(false)
+    const [inputFocused, setInputFocused] = useState(false)
+    const [showMobileSearch, setShowMobileSearch] = useState(false)
+
    const { t } = useTranslation('global')
    const { setOpenSidebar, openSidebar } = useSharedStore()
-    // const { data } = useGetProfile()
-    // const getWalletBalance = useGetWalletBalance()

-    // فرض می‌کنیم که token از localStorage گرفته می‌شود
-    const userToken = localStorage.getItem('jwt-token') || '';
+    const handleSearchChange = (value: string) => {
+        setSearch(value)
+        if (value) {
+            setShowSearchResults(true)
+        } else {
+            setShowSearchResults(false)
+        }
+    }
+
+    const handleInputFocus = () => {
+        setInputFocused(true)
+        if (search) {
+            setShowSearchResults(true)
+        }
+    }
+
+    const handleInputBlur = (e: React.FocusEvent) => {
+        const searchContainer = document.getElementById('search-dropdown-container')
+        const mobileSearchContainer = document.getElementById('mobile-search-dropdown-container')
+
+        if ((searchContainer && searchContainer.contains(e.relatedTarget as Node)) ||
+            (mobileSearchContainer && mobileSearchContainer.contains(e.relatedTarget as Node))) {
+            return
+        }
+
+        setInputFocused(false)
+        setTimeout(() => {
+            setShowSearchResults(false)
+        }, 200)
+    }
+
+    const toggleMobileSearch = () => {
+        setShowMobileSearch(prev => !prev)
+        if (!showMobileSearch) {
+            setTimeout(() => {
+                const mobileSearchInput = document.getElementById('mobile-search-input')
+                if (mobileSearchInput) {
+                    (mobileSearchInput as HTMLInputElement).focus()
+                    setInputFocused(true)
+                }
+            }, 100)
+        } else {
+            setSearch('')
+            setShowSearchResults(false)
+        }
+    }

-    console.log(popoverKey);
    useEffect(() => {
+        const handleClickOutside = (e: MouseEvent) => {
+            const searchContainer = document.getElementById('search-dropdown-container')
+            const mobileSearchContainer = document.getElementById('mobile-search-dropdown-container')
+            const searchInput = document.getElementById('search-input-container')
+            const mobileSearchInput = document.getElementById('mobile-search-input-container')

-        setPopoverKey((prevKey) => prevKey + 1);
-    }, [location.pathname]);
+            const isClickOutsideDesktopSearch =
+                searchContainer && !searchContainer.contains(e.target as Node) &&
+                searchInput && !searchInput.contains(e.target as Node);
+
+            const isClickOutsideMobileSearch =
+                mobileSearchContainer && !mobileSearchContainer.contains(e.target as Node) &&
+                mobileSearchInput && !mobileSearchInput.contains(e.target as Node);
+
+            if ((searchContainer && searchInput && isClickOutsideDesktopSearch) ||
+                (mobileSearchContainer && mobileSearchInput && isClickOutsideMobileSearch)) {
+                setShowSearchResults(false)
+                setInputFocused(false)
+            }
+        }
+
+        document.addEventListener('mousedown', handleClickOutside)
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside)
+        }
+    }, [])

    return (
-        <div className='fixed z-10 right-2 left-2 md:right-4 md:left-4 xl:right-[285px] top-2 md:top-4 xl:h-16 h-12 flex items-center px-3 md:px-6 bg-white justify-between rounded-[20px] md:rounded-[32px] xl:w-[calc(100%-305px)]'>
+        <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)]'>
+            {/* Desktop Search */}
+            <div className='min-w-[270px] hidden xl:block relative'>
+                <div id="search-input-container">
+                    <Input
+                        variant='search'
+                        placeholder={t('header.search')}
+                        onChangeSearchFinal={handleSearchChange}
+                        onFocus={handleInputFocus}
+                        onBlur={handleInputBlur}
+                    />
+                </div>

-            <div className='min-w-[200px] md:min-w-[270px] hidden xl:block'>
-                <Input
-                    variant='search'
-                    placeholder={t('header.search')}
-                    className='bg-secondary border-none'
-                />
-            </div>
-            <div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
-                <HambergerMenu size={24} color='black' />
-            </div>
-            {/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
-            <div className='flex xl:gap-6 gap-3 md:gap-4 items-center'>
-                <Link to={Paths.home}>
-                    <Element3 color='black' className='size-4 md:size-[17px] xl:size-[18px]' />
-                </Link>
-                <Link className='xl:hidden' to={Paths.home}>
-                    <Wallet className='size-4 md:size-[17px] xl:size-[18px]' color='black' />
-                </Link>
-                <Link className='hidden xl:block' to={Paths.home}>
-                    <div className='flex items-center h-8 pl-2 rounded-full bg-[#EEF0F7]'>
-                        <div className='px-3 text-xs'>
-                            {/* {NumberFormat(getWalletBalance.data?.data?.balance) + ' ' + t('toman')} */}
-                        </div>
-                        <div className='size-[26px] flex justify-center items-center bg-white rounded-xl'>
-                            <Wallet className='xl:size-[18px] size-[17px]' color='black' />
+                {showSearchResults && search && inputFocused && (
+                    <div
+                        id="search-dropdown-container"
+                        className='absolute z-20 mt-1 w-full bg-white rounded-xl shadow-lg max-h-80 overflow-y-auto'
+                    >
+                        <div className='p-4 text-center text-sm text-description'>
+                            نتیجه‌ای یافت نشد
                        </div>
                    </div>
-                </Link>
-                {userToken && (
-                    <EmailNotifications
-                        userToken={userToken}
-                        onEmailClick={(email) => navigate(`/mail/${email.messageId}`)}
-                    />
                )}
-                {/* {
+            </div>
+
+            {/* Mobile Layout */}
+            <div className={`${showMobileSearch ? 'w-full' : ''} items-center`}>
+                {!showMobileSearch && (
+                    <div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
+                        <HambergerMenu size={24} color='black' />
+                    </div>
+                )}
+
+                {/* Full width mobile search when active */}
+                {showMobileSearch && (
+                    <div className='flex w-full items-center gap-2'>
+                        <div className='flex-1' id="mobile-search-input-container">
+                            <Input
+                                id="mobile-search-input"
+                                variant='search'
+                                placeholder={t('header.search')}
+                                onChangeSearchFinal={handleSearchChange}
+                                onFocus={handleInputFocus}
+                                onBlur={handleInputBlur}
+                                autoFocus
+                            />
+                        </div>
+                        <div
+                            onClick={toggleMobileSearch}
+                            className='p-2 flex-shrink-0 flex items-center justify-center'
+                        >
+                            <CloseCircle size={20} color='#8C90A3' />
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            {/* Mobile Search Results */}
+            {showMobileSearch && showSearchResults && search && (
+                <div
+                    id="mobile-search-dropdown-container"
+                    className='fixed right-4 left-4 top-16 z-50 bg-white rounded-xl shadow-lg max-h-[calc(100vh-80px)] overflow-y-auto'
+                >
+                    <div className='p-4 text-center text-sm text-description'>
+                        نتیجه‌ای یافت نشد
+                    </div>
+                </div>
+            )}
+
+            <div className={`flex xl:gap-6 gap-4 items-center ${showMobileSearch ? 'hidden xl:flex' : ''}`}>
+                {/* Mobile search icon */}
+                {!showMobileSearch && (
+                    <div onClick={toggleMobileSearch} className='xl:hidden block'>
+                        <SearchNormal size={20} color='black' />
+                    </div>
+                )}
+
+                <Notifications />
+
+                {
                    data && (
                        <Popover className="relative" key={popoverKey}>
                            <PopoverButton >
@@ -77,7 +188,7 @@ const Header: FC = () => {
                                    </div>
                                    <div className='xl:flex hidden gap-1 items-center'>
                                        <div className='text-xs'>
-                                            {data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
+                                            {data?.data?.user?.emailAddress}
                                        </div>
                                        <ArrowDown2 size={14} color='#8C90A3' />
                                    </div>
@@ -88,13 +199,13 @@ const Header: FC = () => {
                                <div className='absolute xl:hidden top-6 left-6'>
                                    <CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
                                </div>
-                                <Link to={Pages.profile} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
+                                <Link to={Paths.profile} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
                                    <div className='size-14 rounded-full overflow-hidden'>
                                        <img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
                                    </div>

                                    <div>
-                                        {data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
+                                        {data?.data?.user?.emailAddress}
                                    </div>

                                    <div className='text-description'>
@@ -103,51 +214,12 @@ const Header: FC = () => {
                                </Link>

                                <div className='pb-6 px-6 border-b border-[#EAEDF5]'>
-                                    <div className='flex justify-between items-center'>
-                                        <SideBarItem
-                                            icon={<Wallet size={20} color='black' />}
-                                            title={t('header.wallet')}
-                                            link={Pages.wallet}
-                                            isActive
-                                            isWithoutLine
-                                        />
-                                        <div className='flex xl:hidden items-center mt-4 h-8 pl-2 rounded-full bg-[#EEF0F7]'>
-                                            <div className='ps-3'>{t('home.balance')}</div>
-                                            <div className='px-3 text-xs'>
-                                                {NumberFormat(getWalletBalance.data?.data?.balance) + ' ' + t('toman')}
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <SideBarItem
-                                        icon={<Card color={'black'} size={20} />}
-                                        title={t('sidebar.transactions')}
-                                        isActive
-                                        link={Pages.transactions}
-                                        isWithoutLine
-                                    />
-
-                                    <SideBarItem
-                                        icon={<TicketDiscount color={'black'} size={20} />}
-                                        title={t('header.discounts')}
-                                        isActive
-                                        link={Pages.discounts}
-                                        isWithoutLine
-                                    />
-
-                                    <SideBarItem
-                                        icon={<Receipt1 color={'black'} size={20} />}
-                                        title={t('header.financial_info')}
-                                        isActive
-                                        link={Pages.financial}
-                                        isWithoutLine
-                                    />

                                    <SideBarItem
                                        icon={<ProfileCircle color={'black'} size={20} />}
                                        title={t('header.profile')}
                                        isActive
-                                        link={Pages.profile}
+                                        link={Paths.profile}
                                        isWithoutLine
                                    />

@@ -155,7 +227,7 @@ const Header: FC = () => {
                                        icon={<Setting2 color={'black'} size={20} />}
                                        title={t('header.setting')}
                                        isActive
-                                        link={Pages.setting}
+                                        link={Paths.setting}
                                        isWithoutLine
                                    />
                                </div>
@@ -164,8 +236,8 @@ const Header: FC = () => {
                                    <SideBarItem
                                        icon={<Logout color={'black'} size={20} />}
                                        title={t('sidebar.logout')}
-                                        isActive
-                                        link={Pages.setting}
+                                        isActive={false}
+                                        link={'#'}
                                        isWithoutLine
                                        isLogout
                                    />
@@ -174,7 +246,7 @@ const Header: FC = () => {
                            </PopoverPanel>
                        </Popover>
                    )
-                } */}
+                }
            </div>
        </div>
    )
@@ -1,6 +1,8 @@
 import { FC, ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 import { clx } from '../helpers/utils'
+import { removeRefreshToken, removeToken } from '@/config/func'
+import { Paths } from '@/utils/Paths'


 type Props = {
@@ -14,8 +16,14 @@ type Props = {

 const SideBarItem: FC<Props> = (props: Props) => {

+    const handleLogout = () => {
+        removeToken()
+        removeRefreshToken()
+        window.location.href = Paths.login
+    }
+
    return (
-        <Link to={props.link} className='flex text-xs gap-9 mt-4'>
+        <Link onClickCapture={props.isLogout ? handleLogout : undefined} to={props.link} className='flex text-xs gap-9 mt-4' onClick={props.isLogout ? handleLogout : undefined}>
            {
                !props.isWithoutLine &&
                <div className={clx(
@@ -11,4 +11,5 @@ export const Paths = {
  setting: "/setting",
  detailEmail: "/mail/",
  login: "/auth/login",
+  profile: "/profile",
 };