dropdown header

src/config/Pages.ts

@@ -29,4 +29,6 @@ export const Pages = {
   setting: "/setting",
   wallet: "/wallet",
   profile: "/profile",
+  discounts: "/discounts",
+  financial: "/financial",
 };

src/index.css

@@ -12,7 +12,7 @@ body {
   padding: 0;
   width: 100%;
   direction: rtl;
-  overflow-x: hidden !important;
+  overflow: hidden !important;
   background: #eceef6;
   font-weight: 300;
   overflow: hidden;

src/langs/fa.json

@@ -62,7 +62,12 @@
     "logout": "خروج"
   },
   "header": {
-    "search": "جستجو"
+    "search": "جستجو",
+    "wallet": "کیف پول",
+    "discounts": "کدهای تخفیف",
+    "financial_info": "مشخصات مالی",
+    "profile": "پروفایل",
+    "setting": "تنظیمات"
   },
   "home": {
     "new": "جدید",

src/shared/Header.tsx

@@ -1,20 +1,28 @@
-import { FC } from 'react'
+import { FC, useEffect, useState } from 'react'
 import Input from '../components/Input'
-import { ArrowDown2, Element3, HambergerMenu, Wallet } from 'iconsax-react'
+import { ArrowDown2, Card, CloseCircle, Element3, HambergerMenu, Logout, ProfileCircle, Receipt1, Setting2, TicketDiscount, Wallet } from 'iconsax-react'
 import AvatarImage from '../assets/images/Avatar.png'
 import { useTranslation } from 'react-i18next'
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 import { Pages } from '../config/Pages'
 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'
 
 const Header: FC = () => {
 
+    const location = useLocation();
+    const [popoverKey, setPopoverKey] = useState(0);
     const { t } = useTranslation('global')
     const { setOpenSidebar, openSidebar } = useSharedStore()
     const { data } = useGetProfile()
 
+    useEffect(() => {
+        setPopoverKey((prevKey) => prevKey + 1);
+    }, [location.pathname]);
+
     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)]'>
 
@@ -35,20 +43,104 @@ const Header: FC = () => {
                 </Link>
                 <Notifications />
                 {
-                    data &&
+                    data && (
-                    <div className='flex gap-2 items-center'>
+                        <Popover className="relative" key={popoverKey}>
-                        <div className='size-6 rounded-full bg-description overflow-hidden'>
+                            <PopoverButton >
-                            <Link to={Pages.profile}>
+                                <div className='flex gap-2 items-center mt-2.5'>
-                                <img src={AvatarImage} className='size-full object-cover' />
+                                    <div className='size-6 rounded-full bg-description overflow-hidden'>
-                            </Link>
+                                        <img src={AvatarImage} className='size-full object-cover' />
-                        </div>
+                                    </div>
-                        <div className='xl:flex hidden gap-1 items-center'>
+                                    <div className='xl:flex hidden gap-1 items-center'>
-                            <div className='text-xs'>
+                                        <div className='text-xs'>
-                                {data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
+                                            {data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
-                            </div>
+                                        </div>
-                            <ArrowDown2 size={14} color='#8C90A3' />
+                                        <ArrowDown2 size={14} color='#8C90A3' />
-                        </div>
+                                    </div>
-                    </div>
+                                </div>
+                            </PopoverButton>
+
+                            <PopoverPanel style={{ minHeight: window.innerWidth < 1140 ? window.innerHeight : undefined }} anchor="bottom" className="flex xl:ml-6 overflow-auto flex-col gap-3 bg-white boxShadow xl:mt-7  z-30 py-4 text-xs rounded-2.5 xl:w-[300px] -mt-[50px] w-full fixed xl:h-fit h-full">
+                                <div className='absolute xl:hidden top-6 left-6'>
+                                    <CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
+                                </div>
+                                <div 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={AvatarImage} className='size-full object-cover' />
+                                    </div>
+
+                                    <div>
+                                        {data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
+                                    </div>
+
+                                    <div className='text-description'>
+                                        {data?.data?.user?.email}
+                                    </div>
+                                </div>
+
+                                <div className='pb-6 px-6 border-b border-[#EAEDF5]'>
+                                    <SideBarItem
+                                        icon={<Wallet size={20} color='black' />}
+                                        title={t('header.wallet')}
+                                        link={Pages.wallet}
+                                        isActive
+                                        isWithoutLine
+                                    />
+
+                                    <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}
+                                        isWithoutLine
+                                    />
+
+                                    <SideBarItem
+                                        icon={<Setting2 color={'black'} size={20} />}
+                                        title={t('header.setting')}
+                                        isActive
+                                        link={Pages.setting}
+                                        isWithoutLine
+                                    />
+                                </div>
+
+                                <div className='px-6'>
+                                    <SideBarItem
+                                        icon={<Logout color={'black'} size={20} />}
+                                        title={t('sidebar.logout')}
+                                        isActive
+                                        link={Pages.setting}
+                                        isWithoutLine
+                                        isLogout
+                                    />
+                                </div>
+
+                            </PopoverPanel>
+                        </Popover>
+                    )
                 }
             </div>
         </div>

src/shared/SideBarItem.tsx

@@ -9,6 +9,7 @@ type Props = {
     isActive: boolean,
     link: string,
     isLogout?: boolean,
+    isWithoutLine?: boolean
 }
 
 const SideBarItem: FC<Props> = (props: Props) => {
@@ -20,10 +21,13 @@ const SideBarItem: FC<Props> = (props: Props) => {
 
     return (
         <Link onClick={props.isLogout ? handleLogout : undefined} to={props.link} className='flex text-xs gap-9 mt-4'>
-            <div className={clx(
+            {
-                'w-1 bg-black h-6',
+                !props.isWithoutLine &&
-                !props.isActive && 'invisible'
+                <div className={clx(
-            )}></div>
+                    'w-1 bg-black h-6',
+                    !props.isActive && 'invisible'
+                )}></div>
+            }
             <div className='flex gap-3 items-center'>
                 {props.icon}
                 <div className={props.isActive ? 'text-black' : ''}>