sidebar clean

src/config/Pages.ts

@@ -151,6 +151,6 @@ export const Pages = {
     },
   },
   subscriptions: {
-    list: "/subscriptions/list",
+    list: "/customers/subscriptions",
   },
 };

src/langs/fa.json

@@ -82,7 +82,8 @@
     "restaurants": "رستوران ها",
     "shops": "فروشگاه ها",
     "sms_count": "تعداد پیامک",
-    "subscriptions": "اشتراک ها"
+    "subscriptions": "اشتراک ها",
+    "financial": "مالی"
   },
   "slider": {
     "new_slider": "اسلایدر جدید",

src/shared/SideBar.tsx

@@ -1,8 +1,8 @@
-import { FC, useEffect } from 'react'
+import { FC, useEffect, useState } from 'react'
 import LogoImage from '../assets/images/logo.svg'
 import LogoSmall from '../assets/images/logo-small.svg'
 import { useTranslation } from 'react-i18next'
-import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Gallery, Headphone, Home2, Logout, Message, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare, Activity, Icon, Category, Warning2, Building, Sms, BagTick } from 'iconsax-react'
+import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Gallery, Headphone, Home2, Logout, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare, Activity, Icon, Category, Warning2, Building, Sms, Chart21, ArrowDown2 } from 'iconsax-react'
 import SideBarItem from './SideBarItem'
 import { useLocation } from 'react-router-dom'
 import { Pages } from '../config/Pages'
@@ -31,6 +31,8 @@ const SideBar: FC = () => {
         return location.pathname.includes(name)
     }
 
+    const [openMenu, setOpenMenu] = useState<string[]>(['menu'])
+
     useEffect(() => {
 
         const split = location.pathname.split('/')
@@ -51,6 +53,17 @@ const SideBar: FC = () => {
 
     const iconSizeSideBar = 20
 
+    const handleOpenMenu = (name: string) => {
+        const opens = [...openMenu]
+        const index = opens.findIndex(o => o === name)
+        if (index > -1) {
+            opens.splice(index, 1)
+        } else {
+            opens.push(name)
+        }
+        setOpenMenu(opens)
+    }
+
 
     return (
         <>
@@ -74,14 +87,26 @@ const SideBar: FC = () => {
                 </div>
 
                 <div className='flex-1 flex flex-col h-full overflow-y-auto no-scrollbar'>
-                    <div className={clx(
+                    <div onClick={() => handleOpenMenu('menu')} className={clx(
-                        'mt-10 px-12 text-header text-sm font-normal',
+                        'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
-                        hasSubMenu && 'px-2 text-center'
+                        hasSubMenu && 'px-2 text-center',
+                        !hasSubMenu && 'flex gap-2 items-center'
                     )}>
                         {t('sidebar.menu')}
+
+                        <div className={clx(
+                            'transition-all',
+                            !openMenu.includes('menu') && 'rotate-180',
+                            hasSubMenu && 'hidden'
+                        )}>
+                            <ArrowDown2 size={18} color='#c3c7dd' />
+                        </div>
                     </div>
 
-                    <div className='text-xs text-[#8C90A3]'>
+                    <div className={clx(
+                        'text-xs text-[#8C90A3]',
+                        !openMenu.includes('menu') && 'hidden'
+                    )}>
                         <SideBarItem
                             icon={<Home2 variant={isActive('dashboard') ? 'Bold' : 'Outline'} color={isActive('dashboard') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.mainpage')}
@@ -129,20 +154,8 @@ const SideBar: FC = () => {
                         />
 
 
-                        <SideBarItem
+
-                            icon={<Receipt21 variant={isActive('receipts') ? 'Bold' : 'Outline'} color={isActive('receipts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+
-                            title={t('sidebar.receipt_list')}
-                            isActive={isActive('receipts')}
-                            link={Pages.receipts.index}
-                            activeName='invoices'
-                        />
-                        <SideBarItem
-                            icon={<Card variant={isActive('transactions') ? 'Bold' : 'Outline'} color={isActive('transactions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.transactions')}
-                            isActive={isActive('transactions')}
-                            link={Pages.transactions}
-                            activeName='transactions'
-                        />
                         <SideBarItem
                             icon={<Money3 variant={isActive('payments') ? 'Bold' : 'Outline'} color={isActive('payments') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.payments')}
@@ -150,13 +163,7 @@ const SideBar: FC = () => {
                             link={Pages.payment.list}
                             activeName='payments'
                         />
-                        <SideBarItem
+
-                            icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.discounts')}
-                            isActive={isActive('discounts')}
-                            link={Pages.discount.list}
-                            activeName='discounts'
-                        />
                         <SideBarItem
                             icon={<Code variant={isActive('referral-code') ? 'Bold' : 'Outline'} color={isActive('referral-code') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.code_referral')}
@@ -179,38 +186,89 @@ const SideBar: FC = () => {
                             activeName='blogs'
                         />
 
+                    </div>
+
+                    {
+                        <div onClick={() => handleOpenMenu('financial')} className={clx(
+                            'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
+                            hasSubMenu && 'px-2 text-center',
+                            !hasSubMenu && 'flex gap-2 items-center'
+                        )}>
+                            {t('sidebar.financial')}
+
+                            <div className={clx(
+                                'transition-all',
+                                !openMenu.includes('financial') && 'rotate-180',
+                                hasSubMenu && 'hidden'
+                            )}>
+                                <ArrowDown2 size={18} color='#c3c7dd' />
+                            </div>
+                        </div>
+                    }
+                    <div className={clx(
+                        'text-xs text-[#8C90A3]',
+                        !openMenu.includes('financial') && 'hidden'
+                    )}>
+
                         <SideBarItem
-                            icon={<Message variant={isActive('feedback') ? 'Bold' : 'Outline'} color={isActive('feedback') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            icon={<Receipt21 variant={isActive('receipts') ? 'Bold' : 'Outline'} color={isActive('receipts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.feedback')}
+                            title={t('sidebar.receipt_list')}
-                            isActive={isActive('feedback')}
+                            isActive={isActive('receipts')}
-                            link={Pages.feedback.list}
+                            link={Pages.receipts.index}
-                            activeName='services'
+                            activeName='invoices'
                         />
 
                         <SideBarItem
-                            icon={<BagTick variant={isActive('subscriptions') ? 'Bold' : 'Outline'} color={isActive('subscriptions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            icon={<Card variant={isActive('transactions') ? 'Bold' : 'Outline'} color={isActive('transactions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.subscriptions')}
+                            title={t('sidebar.transactions')}
-                            isActive={isActive('subscriptions')}
+                            isActive={isActive('transactions')}
-                            link={Pages.subscriptions.list}
+                            link={Pages.transactions}
-                            activeName='payments'
+                            activeName='transactions'
                         />
 
+                        <SideBarItem
+                            icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.discounts')}
+                            isActive={isActive('discounts')}
+                            link={Pages.discount.list}
+                            activeName='discounts'
+                        />
+
+                        <SideBarItem
+                            icon={<Card variant={isActive('card') ? 'Bold' : 'Outline'} color={isActive('card') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.card')}
+                            isActive={isActive('card')}
+                            link={Pages.cardBank.list}
+                            activeName='bank_accounts'
+                        />
                     </div>
 
                     {
                         profile?.data?.user?.roles.some((role: { name: string }) => role.name === 'super_admin') &&
-                        <div className={clx(
+                        <div onClick={() => handleOpenMenu('other')} className={clx(
-                            'mt-10 px-12 text-header text-sm font-normal',
+                            'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
-                            hasSubMenu && 'px-2 text-center'
+                            hasSubMenu && 'px-2 text-center',
+                            !hasSubMenu && 'flex gap-2 items-center'
                         )}>
                             {t('sidebar.other')}
+
+                            <div className={clx(
+                                'transition-all',
+                                !openMenu.includes('other') && 'rotate-180',
+                                hasSubMenu && 'hidden'
+                            )}>
+                                <ArrowDown2 size={18} color='#c3c7dd' />
+                            </div>
                         </div>
                     }
 
 
 
 
-                    <div className='text-xs text-[#8C90A3]'>
+                    <div className={clx(
+                        'text-xs text-[#8C90A3]',
+                        !openMenu.includes('other') && 'hidden'
+                    )}>
                         <SideBarItem
                             icon={<Messages3 variant={isActive('tickets') ? 'Bold' : 'Outline'} color={isActive('tickets') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.ticket')}
@@ -218,7 +276,15 @@ const SideBar: FC = () => {
                             link={Pages.ticket.list}
                             activeName='tickets'
                         />
-                    </div>
+
+                        <SideBarItem
+                            icon={<Chart21 variant={isActive('feedback') ? 'Bold' : 'Outline'} color={isActive('feedback') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.feedback')}
+                            isActive={isActive('feedback')}
+                            link={Pages.feedback.list}
+                            activeName='services'
+                        />
+
 
                         <div className='text-xs text-[#8C90A3]'>
                             <SideBarItem
@@ -240,18 +306,30 @@ const SideBar: FC = () => {
                                 activeName='criticisms'
                             />
                         </div>
-
+                    </div>
                     {
                         profile?.data?.user?.roles?.some((role: { name: string }) => role.name === 'super_admin') &&
-                        <div className={clx(
+                        <div onClick={() => handleOpenMenu('content')} className={clx(
-                            'mt-10 px-12 text-header text-sm font-normal',
+                            'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
-                            hasSubMenu && 'px-2 text-center text-xs'
+                            hasSubMenu && 'px-2 text-center text-xs',
+                            !hasSubMenu && 'flex gap-2 items-center'
                         )}>
                             {t('sidebar.mnage_content')}
+
+                            <div className={clx(
+                                'transition-all',
+                                !openMenu.includes('content') && 'rotate-180',
+                                hasSubMenu && 'hidden'
+                            )}>
+                                <ArrowDown2 size={18} color='#c3c7dd' />
+                            </div>
                         </div>
                     }
 
 
+                    <div className={clx(
+                        !openMenu.includes('content') && 'hidden'
+                    )}>
                         <div className='text-xs text-[#8C90A3]'>
                             <SideBarItem
                                 icon={<DocumentLike variant={isActive('ads') ? 'Bold' : 'Outline'} color={isActive('ads') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
@@ -301,17 +379,30 @@ const SideBar: FC = () => {
                                 activeName='contacts_us'
                             />
                         </div>
+                    </div>
 
                     {
                         adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'dmenu') &&
                         <>
-                            <div className={clx(
+                            <div onClick={() => handleOpenMenu('dmenu')} className={clx(
-                                'mt-10 px-12 text-header text-sm font-normal',
+                                'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
-                                hasSubMenu && 'px-2 text-center'
+                                hasSubMenu && 'px-2 text-center',
+                                !hasSubMenu && 'flex gap-2 items-center'
                             )}>
                                 {t('sidebar.dmenu')}
+
+                                <div className={clx(
+                                    'transition-all',
+                                    !openMenu.includes('dmenu') && 'rotate-180',
+                                    hasSubMenu && 'hidden'
+                                )}>
+                                    <ArrowDown2 size={18} color='#c3c7dd' />
                                 </div>
-                            <div className='flex-1 flex flex-col justify-end'>
+                            </div>
+                            <div className={clx(
+                                'flex-1 flex flex-col justify-end',
+                                !openMenu.includes('dmenu') && 'hidden'
+                            )}>
 
                                 <div className='text-xs text-[#8C90A3]'>
                                     <SideBarItem
@@ -369,13 +460,26 @@ const SideBar: FC = () => {
                     {
                         adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'dkala') &&
                         <>
-                            <div className={clx(
+                            <div onClick={() => handleOpenMenu('dkala')} className={clx(
-                                'mt-10 px-12 text-header text-sm font-normal',
+                                'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
-                                hasSubMenu && 'px-2 text-center'
+                                hasSubMenu && 'px-2 text-center',
+                                !hasSubMenu && 'flex gap-2 items-center'
                             )}>
                                 {t('sidebar.dkala')}
+
+                                <div className={clx(
+                                    'transition-all',
+                                    !openMenu.includes('dkala') && 'rotate-180',
+                                    hasSubMenu && 'hidden'
+                                )}>
+                                    <ArrowDown2 size={18} color='#c3c7dd' />
                                 </div>
-                            <div className='flex-1 flex flex-col justify-end'>
+                            </div>
+                            <div className={clx(
+                                'flex-1 flex flex-col justify-end',
+                                !openMenu.includes('dkala') && 'hidden'
+
+                            )}>
 
                                 <div className='text-xs text-[#8C90A3]'>
                                     <SideBarItem
@@ -432,13 +536,7 @@ const SideBar: FC = () => {
 
                     <div className='flex-1 flex flex-col justify-end mt-14'>
                         <div className='text-xs text-[#8C90A3]'>
-                            <SideBarItem
+
-                                icon={<Card variant={isActive('card') ? 'Bold' : 'Outline'} color={isActive('card') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.card')}
-                                isActive={isActive('card')}
-                                link={Pages.cardBank.list}
-                                activeName='bank_accounts'
-                            />
                         </div>
                         <div className='text-xs text-[#8C90A3]'>
                             <SideBarItem

src/shared/components/CustomerSubMenu.tsx

@@ -36,6 +36,11 @@ const CustomerSubMenu: FC = () => {
                     isActive={isActive('create')}
                     link={Pages.customer.create}
                 />
+                <SubMenuItem
+                    title={t('sidebar.subscriptions')}
+                    isActive={isActive('subscriptions')}
+                    link={Pages.subscriptions.list}
+                />
             </div>
 
         </div>