hamid zarghami
678 lines
36 KiB
TypeScript
678 lines
36 KiB
TypeScript
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, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare, Activity, Icon, Category, Warning2, Building, Sms, Chart21, ArrowDown2, Global, UserTick, Money } from 'iconsax-react'
|
|
import SideBarItem from './SideBarItem'
|
|
import { useLocation } from 'react-router-dom'
|
|
import { Pages } from '../config/Pages'
|
|
import { useSharedStore } from './store/sharedStore'
|
|
import { clx } from '../helpers/utils'
|
|
import ServicesSubMenu from './components/ServicesSubMenu'
|
|
import { SideBarItemHasSubMenu } from '../config/SideBarSubMenu'
|
|
import ReceiptSubMenu from './components/ReceiptSubMenu'
|
|
import CustomerSubMenu from './components/CustomerSubMenu'
|
|
import TicketSubMenu from './components/TicketSubMenu'
|
|
import UsersSubMenu from './components/UsersSubMenu'
|
|
import LearningSubMenu from './components/LearningSubMenu'
|
|
import BlogSubMenu from './components/BlogSubMenu'
|
|
import { useGetProfile } from '../pages/profile/hooks/useProfileData'
|
|
import SupportSubMenu from './components/SupportSubMenu'
|
|
import AccessLogsSubMenu from './components/AccessLogsSubMenu'
|
|
import { useGetAdminPermissions } from '../pages/users/hooks/useUserData'
|
|
const SideBar: FC = () => {
|
|
|
|
const { t } = useTranslation('global')
|
|
const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
|
|
const location = useLocation()
|
|
const { data: profile } = useGetProfile()
|
|
const { data: adminPermissions } = useGetAdminPermissions()
|
|
const isActive = (name: string) => {
|
|
return location.pathname.includes(name)
|
|
}
|
|
|
|
const [openMenu, setOpenMenu] = useState<string[]>(['menu'])
|
|
|
|
useEffect(() => {
|
|
|
|
const split = location.pathname.split('/')
|
|
|
|
|
|
if (SideBarItemHasSubMenu.includes(split[1])) {
|
|
setSubMenuName(split[1])
|
|
setSubtMenu(true)
|
|
} else {
|
|
setSubMenuName('')
|
|
setSubtMenu(false)
|
|
}
|
|
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [location.pathname])
|
|
|
|
|
|
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 (
|
|
<>
|
|
{
|
|
openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-50 z-10' onClick={() => setOpenSidebar(false)} />
|
|
}
|
|
<div
|
|
className={clx(
|
|
'fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100 xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[250px] bg-white flex-col py-12',
|
|
openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40',
|
|
hasSubMenu && 'w-24 !rounded-tl-none !rounded-bl-none'
|
|
)}
|
|
>
|
|
<div className='flex justify-center'>
|
|
{
|
|
!hasSubMenu ?
|
|
<img src={LogoImage} className='w-[140px]' />
|
|
:
|
|
<img src={LogoSmall} className='w-7' />
|
|
}
|
|
</div>
|
|
|
|
<div className='flex-1 flex flex-col h-full overflow-y-auto no-scrollbar'>
|
|
<div onClick={() => handleOpenMenu('menu')} 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.menu')}
|
|
|
|
<div className={clx(
|
|
'transition-all',
|
|
!openMenu.includes('menu') && 'rotate-180',
|
|
hasSubMenu && 'hidden'
|
|
)}>
|
|
<ArrowDown2 size={18} color='#c3c7dd' />
|
|
</div>
|
|
</div>
|
|
|
|
<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')}
|
|
isActive={isActive('dashboard')}
|
|
link={Pages.dashboard}
|
|
activeName=''
|
|
/>
|
|
<SideBarItem
|
|
icon={<Element3 variant={isActive('services') ? 'Bold' : 'Outline'} color={isActive('services') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.services')}
|
|
isActive={isActive('services')}
|
|
link={Pages.services.list}
|
|
name='services'
|
|
activeName='services'
|
|
/>
|
|
|
|
<SideBarItem
|
|
icon={<Headphone variant={isActive('support') ? 'Bold' : 'Outline'} color={isActive('support') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.support')}
|
|
isActive={isActive('support')}
|
|
link={Pages.support.list}
|
|
activeName='support_plan'
|
|
/>
|
|
|
|
<SideBarItem
|
|
icon={<People variant={isActive('customers') ? 'Bold' : 'Outline'} color={isActive('customers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.customers')}
|
|
isActive={isActive('customers')}
|
|
link={Pages.customers.list}
|
|
activeName='customers'
|
|
/>
|
|
<SideBarItem
|
|
icon={<UserSquare variant={isActive('representatives') ? 'Bold' : 'Outline'} color={isActive('representatives') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.representatives')}
|
|
isActive={isActive('representatives')}
|
|
link={Pages.representative.list}
|
|
activeName='agents'
|
|
/>
|
|
<SideBarItem
|
|
icon={<CodeCircle variant={isActive('developers') ? 'Bold' : 'Outline'} color={isActive('developers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.developers')}
|
|
isActive={isActive('developers')}
|
|
link={Pages.developers.list}
|
|
activeName='developers'
|
|
/>
|
|
|
|
|
|
|
|
|
|
<SideBarItem
|
|
icon={<Money3 variant={isActive('payments') ? 'Bold' : 'Outline'} color={isActive('payments') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.payments')}
|
|
isActive={isActive('payments')}
|
|
link={Pages.payment.list}
|
|
activeName='payments'
|
|
/>
|
|
|
|
<SideBarItem
|
|
icon={<Code variant={isActive('referral-code') ? 'Bold' : 'Outline'} color={isActive('referral-code') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.code_referral')}
|
|
isActive={isActive('referral-code')}
|
|
link={Pages.referralCode.list}
|
|
activeName='referralCode'
|
|
/>
|
|
<SideBarItem
|
|
icon={<Profile variant={isActive('users') ? 'Bold' : 'Outline'} color={isActive('users') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.users')}
|
|
isActive={isActive('users')}
|
|
link={Pages.users.list}
|
|
activeName='admins'
|
|
/>
|
|
<SideBarItem
|
|
icon={<Gallery variant={isActive('sliders') ? 'Bold' : 'Outline'} color={isActive('sliders') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.sliders')}
|
|
isActive={isActive('sliders')}
|
|
link={Pages.sliders.list}
|
|
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={<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={<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 onClick={() => handleOpenMenu('other')} 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.other')}
|
|
|
|
<div className={clx(
|
|
'transition-all',
|
|
!openMenu.includes('other') && 'rotate-180',
|
|
hasSubMenu && 'hidden'
|
|
)}>
|
|
<ArrowDown2 size={18} color='#c3c7dd' />
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
|
|
|
|
|
|
<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')}
|
|
isActive={isActive('tickets')}
|
|
link={Pages.ticket.list}
|
|
activeName='tickets'
|
|
/>
|
|
|
|
<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
|
|
icon={<Activity variant={isActive('access-logs') ? 'Bold' : 'Outline'} color={isActive('access-logs') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.accessLogs')}
|
|
isActive={isActive('access-logs')}
|
|
link={Pages.accessLogs.list}
|
|
name='accessLogs'
|
|
activeName='logs'
|
|
/>
|
|
</div>
|
|
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<DocumentText variant={isActive('criticisms') ? 'Bold' : 'Outline'} color={isActive('criticisms') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.criticisms')}
|
|
isActive={isActive('criticisms')}
|
|
link={Pages.criticisms.list}
|
|
activeName='criticisms'
|
|
/>
|
|
</div>
|
|
</div>
|
|
{
|
|
profile?.data?.user?.roles?.some((role: { name: string }) => role.name === 'super_admin') &&
|
|
<div onClick={() => handleOpenMenu('content')} className={clx(
|
|
'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
|
|
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>
|
|
}
|
|
|
|
{
|
|
adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'reseller') &&
|
|
<>
|
|
<div onClick={() => handleOpenMenu('reseller')} 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.reseller')}
|
|
|
|
<div className={clx(
|
|
'transition-all',
|
|
!openMenu.includes('reseller') && 'rotate-180',
|
|
hasSubMenu && 'hidden'
|
|
)}>
|
|
<ArrowDown2 size={18} color='#c3c7dd' />
|
|
</div>
|
|
</div>
|
|
<div className={clx(
|
|
'flex-1 flex flex-col justify-end',
|
|
!openMenu.includes('reseller') && 'hidden'
|
|
|
|
)}>
|
|
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<UserTick variant={isActive('reseller/list') ? 'Bold' : 'Outline'} color={isActive('reseller/list') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.resellers')}
|
|
isActive={isActive('reseller/list')}
|
|
link={Pages.reseller.list}
|
|
activeName='reseller'
|
|
/>
|
|
</div>
|
|
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<Money variant={isActive('reseller/withdraw') ? 'Bold' : 'Outline'} color={isActive('reseller/withdraw') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.withdraw')}
|
|
isActive={isActive('reseller/withdraw')}
|
|
link={Pages.reseller.withdraw}
|
|
activeName='reseller'
|
|
/>
|
|
</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} />}
|
|
title={t('sidebar.ads')}
|
|
isActive={isActive('ads')}
|
|
link={Pages.ads.list}
|
|
activeName='advertisements'
|
|
/>
|
|
</div>
|
|
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<NotificationStatus variant={isActive('announcement') ? 'Bold' : 'Outline'} color={isActive('announcement') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.announcement')}
|
|
isActive={isActive('announcement')}
|
|
link={Pages.announcement.list}
|
|
activeName='announcements'
|
|
/>
|
|
</div>
|
|
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<DocumentText variant={isActive('blog') ? 'Bold' : 'Outline'} color={isActive('blog') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.blog')}
|
|
isActive={isActive('blog')}
|
|
link={Pages.blog.list}
|
|
activeName='blogs'
|
|
/>
|
|
</div>
|
|
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<Teacher variant={isActive('learning') ? 'Bold' : 'Outline'} color={isActive('learning') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.learning')}
|
|
isActive={isActive('learning')}
|
|
link={Pages.learning.list}
|
|
activeName='learnings'
|
|
/>
|
|
</div>
|
|
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<SmsTracking variant={isActive('messages') ? 'Bold' : 'Outline'} color={isActive('messages') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.messages')}
|
|
isActive={isActive('messages')}
|
|
link={Pages.messages.list}
|
|
activeName='contacts_us'
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{
|
|
adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'dmenu') &&
|
|
<>
|
|
<div onClick={() => handleOpenMenu('dmenu')} 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.dmenu')}
|
|
|
|
<div className={clx(
|
|
'transition-all',
|
|
!openMenu.includes('dmenu') && 'rotate-180',
|
|
hasSubMenu && 'hidden'
|
|
)}>
|
|
<ArrowDown2 size={18} color='#c3c7dd' />
|
|
</div>
|
|
</div>
|
|
<div className={clx(
|
|
'flex-1 flex flex-col justify-end',
|
|
!openMenu.includes('dmenu') && 'hidden'
|
|
)}>
|
|
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<Icon variant={isActive('dmenu/icons/list') ? 'Bold' : 'Outline'} color={isActive('dmenu/icons/list') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.icons')}
|
|
isActive={isActive('dmenu/icons/list')}
|
|
link={Pages.dmenu.icons.list}
|
|
activeName='dmenu'
|
|
/>
|
|
</div>
|
|
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<Category variant={isActive('dmenu/icons/group/list') ? 'Bold' : 'Outline'} color={isActive('dmenu/icons/group/list') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.groups_icon')}
|
|
isActive={isActive('dmenu/icons/group/list')}
|
|
link={Pages.dmenu.icons.groupList}
|
|
activeName='dmenu'
|
|
/>
|
|
</div>
|
|
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<Warning2 variant={isActive('dmenu/reports') ? 'Bold' : 'Outline'} color={isActive('dmenu/reports') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.reports')}
|
|
isActive={isActive('dmenu/reports')}
|
|
link={Pages.dmenu.warnings.list}
|
|
activeName='dmenu'
|
|
/>
|
|
</div>
|
|
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<Building variant={isActive('restaurants') ? 'Bold' : 'Outline'} color={isActive('restaurants') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.restaurants')}
|
|
isActive={isActive('restaurants')}
|
|
link={Pages.dmenu.restaurants.list}
|
|
activeName='dmenu'
|
|
/>
|
|
</div>
|
|
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<Sms variant={isActive('sms-count') ? 'Bold' : 'Outline'} color={isActive('sms-count') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.sms_count')}
|
|
isActive={isActive('sms-count')}
|
|
link={Pages.dmenu.restaurants.smsCountList}
|
|
activeName='dmenu'
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
}
|
|
|
|
{
|
|
adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'dkala') &&
|
|
<>
|
|
<div onClick={() => handleOpenMenu('dkala')} 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.dkala')}
|
|
|
|
<div className={clx(
|
|
'transition-all',
|
|
!openMenu.includes('dkala') && 'rotate-180',
|
|
hasSubMenu && 'hidden'
|
|
)}>
|
|
<ArrowDown2 size={18} color='#c3c7dd' />
|
|
</div>
|
|
</div>
|
|
<div className={clx(
|
|
'flex-1 flex flex-col justify-end',
|
|
!openMenu.includes('dkala') && 'hidden'
|
|
|
|
)}>
|
|
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<Icon variant={isActive('dkala/icons/list') ? 'Bold' : 'Outline'} color={isActive('dkala/icons/list') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.icons')}
|
|
isActive={isActive('dkala/icons/list')}
|
|
link={Pages.dkala.icons.list}
|
|
activeName='dkala'
|
|
/>
|
|
</div>
|
|
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<Category variant={isActive('dkala/icons/group') ? 'Bold' : 'Outline'} color={isActive('dkala/icons/group') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.groups_icon')}
|
|
isActive={isActive('dkala/icons/group')}
|
|
link={Pages.dkala.icons.groupList}
|
|
activeName='dkala'
|
|
/>
|
|
</div>
|
|
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<Warning2 variant={isActive('dkala/reports') ? 'Bold' : 'Outline'} color={isActive('dkala/reports') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.reports')}
|
|
isActive={isActive('dkala/reports')}
|
|
link={Pages.dkala.warnings.list}
|
|
activeName='dkala'
|
|
/>
|
|
</div>
|
|
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<Building variant={isActive('dkala/shops') ? 'Bold' : 'Outline'} color={isActive('dkala/shops') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.shops')}
|
|
isActive={isActive('dkala/shops')}
|
|
link={Pages.dkala.shops.list}
|
|
activeName='dkala'
|
|
/>
|
|
</div>
|
|
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<Sms variant={isActive('dkala/sms-count') ? 'Bold' : 'Outline'} color={isActive('dkala/sms-count') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.sms_count')}
|
|
isActive={isActive('dkala/sms-count')}
|
|
link={Pages.dkala.shops.smsCountList}
|
|
activeName='dkala'
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
}
|
|
{
|
|
adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'dmail') &&
|
|
<>
|
|
<div onClick={() => handleOpenMenu('dmail')} 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.dmail')}
|
|
|
|
<div className={clx(
|
|
'transition-all',
|
|
!openMenu.includes('dmail') && 'rotate-180',
|
|
hasSubMenu && 'hidden'
|
|
)}>
|
|
<ArrowDown2 size={18} color='#c3c7dd' />
|
|
</div>
|
|
</div>
|
|
<div className={clx(
|
|
'flex-1 flex flex-col justify-end',
|
|
!openMenu.includes('dmail') && 'hidden'
|
|
|
|
)}>
|
|
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<Global variant={isActive('dmail/domain/list') ? 'Bold' : 'Outline'} color={isActive('dmail/domain/list') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.domain')}
|
|
isActive={isActive('dmail/domain/list')}
|
|
link={Pages.dmail.list}
|
|
activeName='dmail'
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
}
|
|
|
|
<div className='flex-1 flex flex-col justify-end mt-14'>
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
|
|
</div>
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<Setting2 variant={isActive('setting') ? 'Bold' : 'Outline'} color={isActive('setting') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.setting')}
|
|
isActive={isActive('setting')}
|
|
link={Pages.setting}
|
|
activeName='settings'
|
|
/>
|
|
</div>
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.logout')}
|
|
isActive={isActive('logout')}
|
|
link={`#`}
|
|
isLogout
|
|
activeName=''
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div >
|
|
|
|
{
|
|
hasSubMenu && (openSidebar || window.innerWidth > 1139) &&
|
|
<div className='fixed xl:right-[112px] right-[96px] bg-white z-20 xl:top-4 xl:bottom-4 top-0 bottom-0 rounded-tl-[32px] rounded-bl-[32px] w-[190px] border-r'>
|
|
{
|
|
subMenuName === 'services' ?
|
|
<ServicesSubMenu />
|
|
: subMenuName === 'receipts' ?
|
|
<ReceiptSubMenu />
|
|
: subMenuName === 'customers' ?
|
|
<CustomerSubMenu />
|
|
: subMenuName === 'tickets' ?
|
|
<TicketSubMenu />
|
|
: subMenuName === 'users' ?
|
|
<UsersSubMenu />
|
|
: subMenuName === 'learning' ?
|
|
<LearningSubMenu />
|
|
: subMenuName === 'blog' ?
|
|
<BlogSubMenu />
|
|
: subMenuName === 'support' ?
|
|
<SupportSubMenu />
|
|
: subMenuName === 'accessLogs' ?
|
|
<AccessLogsSubMenu />
|
|
: null
|
|
}
|
|
</div>
|
|
}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default SideBar |