add skeleton for get permission
This commit is contained in:
hamid zarghami
+251
-185
@@ -15,13 +15,14 @@ import DiscountSubMenu from './components/DiscountSubMenu'
|
|||||||
import { SideBarItemHasSubMenu } from '../config/SideBarSubMenu'
|
import { SideBarItemHasSubMenu } from '../config/SideBarSubMenu'
|
||||||
import { usePermissions } from '@/hooks/usePermissions'
|
import { usePermissions } from '@/hooks/usePermissions'
|
||||||
import { PermissionEnum } from '@/pages/roles/enum/Enum'
|
import { PermissionEnum } from '@/pages/roles/enum/Enum'
|
||||||
|
import Skeleton from 'react-loading-skeleton'
|
||||||
|
|
||||||
const SideBar: FC = () => {
|
const SideBar: FC = () => {
|
||||||
|
|
||||||
const { t } = useTranslation('global')
|
const { t } = useTranslation('global')
|
||||||
const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
|
const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
|
||||||
const location = useLocation()
|
const location = useLocation()
|
||||||
const { checkPermission } = usePermissions()
|
const { checkPermission, isLoading } = usePermissions()
|
||||||
|
|
||||||
const isActive = (name: string) => {
|
const isActive = (name: string) => {
|
||||||
return location.pathname.includes(name)
|
return location.pathname.includes(name)
|
||||||
@@ -72,9 +73,26 @@ const SideBar: FC = () => {
|
|||||||
{t('sidebar.menu')}
|
{t('sidebar.menu')}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='text-xs text-[#8C90A3]'>
|
{isLoading ? (
|
||||||
{
|
<div className='text-xs text-[#8C90A3] mt-4 px-12 space-y-4'>
|
||||||
checkPermission(PermissionEnum.MANAGE_REPORTS) && (
|
{Array.from({ length: 8 }).map((_, index) => (
|
||||||
|
<div key={index} className={clx(
|
||||||
|
'flex gap-9',
|
||||||
|
hasSubMenu && 'flex-col items-center'
|
||||||
|
)}>
|
||||||
|
<div className={clx(
|
||||||
|
'flex gap-3 items-center',
|
||||||
|
hasSubMenu && 'flex-col'
|
||||||
|
)}>
|
||||||
|
<Skeleton circle width={20} height={20} />
|
||||||
|
<Skeleton width={hasSubMenu ? 40 : 100} height={16} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className='text-xs text-[#8C90A3]'>
|
||||||
|
{checkPermission(PermissionEnum.MANAGE_REPORTS) && (
|
||||||
<SideBarItem
|
<SideBarItem
|
||||||
icon={<Home2 variant={isActive('dashboard') ? 'Bold' : 'Outline'} color={isActive('dashboard') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
icon={<Home2 variant={isActive('dashboard') ? 'Bold' : 'Outline'} color={isActive('dashboard') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||||
title={t('sidebar.mainpage')}
|
title={t('sidebar.mainpage')}
|
||||||
@@ -82,142 +100,142 @@ const SideBar: FC = () => {
|
|||||||
link={Pages.dashboard}
|
link={Pages.dashboard}
|
||||||
activeName=''
|
activeName=''
|
||||||
/>
|
/>
|
||||||
)
|
)}
|
||||||
}
|
|
||||||
|
|
||||||
{checkPermission(PermissionEnum.MANAGE_ORDERS) && (
|
{checkPermission(PermissionEnum.MANAGE_ORDERS) && (
|
||||||
<SideBarItem
|
|
||||||
icon={<DocumentText variant={isActive('orders') ? 'Bold' : 'Outline'} color={isActive('orders') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
||||||
title={t('sidebar.orders')}
|
|
||||||
isActive={isActive('orders')}
|
|
||||||
link={Pages.orders.list}
|
|
||||||
name='orders'
|
|
||||||
activeName='orders'
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{checkPermission(PermissionEnum.MANAGE_FOODS) && (
|
|
||||||
<SideBarItem
|
|
||||||
icon={<Element3 variant={isActive('foods') ? 'Bold' : 'Outline'} color={isActive('foods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
||||||
title={t('sidebar.foods')}
|
|
||||||
isActive={isActive('foods')}
|
|
||||||
link={Pages.foods.list}
|
|
||||||
activeName='foods'
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{checkPermission(PermissionEnum.MANAGE_SCHEDULES) && (
|
|
||||||
<SideBarItem
|
|
||||||
icon={<Calendar variant={isActive('schedule') ? 'Bold' : 'Outline'} color={isActive('schedule') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
||||||
title={t('sidebar.schedule')}
|
|
||||||
isActive={isActive('schedule')}
|
|
||||||
link={Pages.schedule.list}
|
|
||||||
name='schedule'
|
|
||||||
activeName='schedule'
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{checkPermission(PermissionEnum.MANAGE_PAYMENTS) && (
|
|
||||||
<SideBarItem
|
|
||||||
icon={<Card variant={isActive('payment_methods') ? 'Bold' : 'Outline'} color={isActive('payment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
||||||
title={t('sidebar.payment_methods')}
|
|
||||||
isActive={isActive('payment_methods')}
|
|
||||||
link={Pages.payment_methods.list}
|
|
||||||
name='payment_methods'
|
|
||||||
activeName='payment_methods'
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{checkPermission(PermissionEnum.MANAGE_USERS) && (
|
|
||||||
<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}
|
|
||||||
name='customers'
|
|
||||||
activeName='customers'
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{checkPermission(PermissionEnum.MANAGE_REVIEWS) && (
|
|
||||||
<SideBarItem
|
|
||||||
icon={<Star1 variant={isActive('reviews') ? 'Bold' : 'Outline'} color={isActive('reviews') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
||||||
title={t('sidebar.reviews')}
|
|
||||||
isActive={isActive('reviews')}
|
|
||||||
link={Pages.reviews.list}
|
|
||||||
name='reviews'
|
|
||||||
activeName='reviews'
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{checkPermission(PermissionEnum.MANAGE_PAGER) && (
|
|
||||||
<SideBarItem
|
|
||||||
icon={<NotificationBing variant={isActive('pagers') ? 'Bold' : 'Outline'} color={isActive('pagers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
||||||
title={t('sidebar.pagers')}
|
|
||||||
isActive={isActive('pagers')}
|
|
||||||
link={Pages.pagers.list}
|
|
||||||
name='pagers'
|
|
||||||
activeName='pagers'
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{checkPermission(PermissionEnum.MANAGE_ADMINS) && (
|
|
||||||
<SideBarItem
|
|
||||||
icon={<SecurityUser variant={isActive('admins') ? 'Bold' : 'Outline'} color={isActive('admins') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
||||||
title={t('sidebar.admins')}
|
|
||||||
isActive={isActive('admins')}
|
|
||||||
link={Pages.admins.list}
|
|
||||||
name='admins'
|
|
||||||
activeName='admins'
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{checkPermission(PermissionEnum.MANAGE_DELIVERY) && (
|
|
||||||
<SideBarItem
|
|
||||||
icon={<TruckFast variant={isActive('shipment_methods') ? 'Bold' : 'Outline'} color={isActive('shipment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
||||||
title={t('sidebar.shipment_methods')}
|
|
||||||
isActive={isActive('shipment_methods')}
|
|
||||||
link={Pages.shipment_methods.list}
|
|
||||||
name='shipment_methods'
|
|
||||||
activeName='shipment_methods'
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{checkPermission(PermissionEnum.MANAGE_COUPONS) && (
|
|
||||||
<SideBarItem
|
|
||||||
icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
||||||
title={t('sidebar.discount')}
|
|
||||||
isActive={isActive('discounts')}
|
|
||||||
link={Pages.coupons.list}
|
|
||||||
name='discounts'
|
|
||||||
activeName='discounts'
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{checkPermission(PermissionEnum.MANAGE_ROLES) && (
|
|
||||||
<SideBarItem
|
|
||||||
icon={<Security variant={isActive('roles') ? 'Bold' : 'Outline'} color={isActive('roles') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
||||||
title={t('sidebar.roles')}
|
|
||||||
isActive={isActive('roles')}
|
|
||||||
link={Pages.roles.list}
|
|
||||||
name='roles'
|
|
||||||
activeName='roles'
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{
|
|
||||||
checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
|
|
||||||
<SideBarItem
|
<SideBarItem
|
||||||
icon={<NotificationStatus variant={isActive('notifications') ? 'Bold' : 'Outline'} color={isActive('notifications') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
icon={<DocumentText variant={isActive('orders') ? 'Bold' : 'Outline'} color={isActive('orders') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||||
title={t('sidebar.notifications')}
|
title={t('sidebar.orders')}
|
||||||
isActive={isActive('notifications')}
|
isActive={isActive('orders')}
|
||||||
link={Pages.notifications.list}
|
link={Pages.orders.list}
|
||||||
name='notifications'
|
name='orders'
|
||||||
activeName='notifications'
|
activeName='orders'
|
||||||
/>
|
/>
|
||||||
)
|
)}
|
||||||
}
|
|
||||||
</div>
|
{checkPermission(PermissionEnum.MANAGE_FOODS) && (
|
||||||
|
<SideBarItem
|
||||||
|
icon={<Element3 variant={isActive('foods') ? 'Bold' : 'Outline'} color={isActive('foods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||||
|
title={t('sidebar.foods')}
|
||||||
|
isActive={isActive('foods')}
|
||||||
|
link={Pages.foods.list}
|
||||||
|
activeName='foods'
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{checkPermission(PermissionEnum.MANAGE_SCHEDULES) && (
|
||||||
|
<SideBarItem
|
||||||
|
icon={<Calendar variant={isActive('schedule') ? 'Bold' : 'Outline'} color={isActive('schedule') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||||
|
title={t('sidebar.schedule')}
|
||||||
|
isActive={isActive('schedule')}
|
||||||
|
link={Pages.schedule.list}
|
||||||
|
name='schedule'
|
||||||
|
activeName='schedule'
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{checkPermission(PermissionEnum.MANAGE_PAYMENTS) && (
|
||||||
|
<SideBarItem
|
||||||
|
icon={<Card variant={isActive('payment_methods') ? 'Bold' : 'Outline'} color={isActive('payment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||||
|
title={t('sidebar.payment_methods')}
|
||||||
|
isActive={isActive('payment_methods')}
|
||||||
|
link={Pages.payment_methods.list}
|
||||||
|
name='payment_methods'
|
||||||
|
activeName='payment_methods'
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{checkPermission(PermissionEnum.MANAGE_USERS) && (
|
||||||
|
<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}
|
||||||
|
name='customers'
|
||||||
|
activeName='customers'
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{checkPermission(PermissionEnum.MANAGE_REVIEWS) && (
|
||||||
|
<SideBarItem
|
||||||
|
icon={<Star1 variant={isActive('reviews') ? 'Bold' : 'Outline'} color={isActive('reviews') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||||
|
title={t('sidebar.reviews')}
|
||||||
|
isActive={isActive('reviews')}
|
||||||
|
link={Pages.reviews.list}
|
||||||
|
name='reviews'
|
||||||
|
activeName='reviews'
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{checkPermission(PermissionEnum.MANAGE_PAGER) && (
|
||||||
|
<SideBarItem
|
||||||
|
icon={<NotificationBing variant={isActive('pagers') ? 'Bold' : 'Outline'} color={isActive('pagers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||||
|
title={t('sidebar.pagers')}
|
||||||
|
isActive={isActive('pagers')}
|
||||||
|
link={Pages.pagers.list}
|
||||||
|
name='pagers'
|
||||||
|
activeName='pagers'
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{checkPermission(PermissionEnum.MANAGE_ADMINS) && (
|
||||||
|
<SideBarItem
|
||||||
|
icon={<SecurityUser variant={isActive('admins') ? 'Bold' : 'Outline'} color={isActive('admins') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||||
|
title={t('sidebar.admins')}
|
||||||
|
isActive={isActive('admins')}
|
||||||
|
link={Pages.admins.list}
|
||||||
|
name='admins'
|
||||||
|
activeName='admins'
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{checkPermission(PermissionEnum.MANAGE_DELIVERY) && (
|
||||||
|
<SideBarItem
|
||||||
|
icon={<TruckFast variant={isActive('shipment_methods') ? 'Bold' : 'Outline'} color={isActive('shipment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||||
|
title={t('sidebar.shipment_methods')}
|
||||||
|
isActive={isActive('shipment_methods')}
|
||||||
|
link={Pages.shipment_methods.list}
|
||||||
|
name='shipment_methods'
|
||||||
|
activeName='shipment_methods'
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{checkPermission(PermissionEnum.MANAGE_COUPONS) && (
|
||||||
|
<SideBarItem
|
||||||
|
icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||||
|
title={t('sidebar.discount')}
|
||||||
|
isActive={isActive('discounts')}
|
||||||
|
link={Pages.coupons.list}
|
||||||
|
name='discounts'
|
||||||
|
activeName='discounts'
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{checkPermission(PermissionEnum.MANAGE_ROLES) && (
|
||||||
|
<SideBarItem
|
||||||
|
icon={<Security variant={isActive('roles') ? 'Bold' : 'Outline'} color={isActive('roles') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||||
|
title={t('sidebar.roles')}
|
||||||
|
isActive={isActive('roles')}
|
||||||
|
link={Pages.roles.list}
|
||||||
|
name='roles'
|
||||||
|
activeName='roles'
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{
|
||||||
|
checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
|
||||||
|
<SideBarItem
|
||||||
|
icon={<NotificationStatus variant={isActive('notifications') ? 'Bold' : 'Outline'} color={isActive('notifications') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||||
|
title={t('sidebar.notifications')}
|
||||||
|
isActive={isActive('notifications')}
|
||||||
|
link={Pages.notifications.list}
|
||||||
|
name='notifications'
|
||||||
|
activeName='notifications'
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className={clx(
|
<div className={clx(
|
||||||
'mt-10 px-12 text-header text-sm font-normal',
|
'mt-10 px-12 text-header text-sm font-normal',
|
||||||
@@ -226,59 +244,107 @@ const SideBar: FC = () => {
|
|||||||
{t('sidebar.other')}
|
{t('sidebar.other')}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='text-xs text-[#8C90A3]'>
|
{isLoading ? (
|
||||||
{/* {checkPermission(PermissionEnum.VIEW_REPORTS) && (
|
<div className='text-xs text-[#8C90A3] mt-4 px-12 space-y-4'>
|
||||||
<SideBarItem
|
<div className={clx(
|
||||||
icon={<Chart1 variant={isActive('statistics') ? 'Bold' : 'Outline'} color={isActive('statistics') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
'flex gap-9',
|
||||||
title={t('sidebar.statistics')}
|
hasSubMenu && 'flex-col items-center'
|
||||||
isActive={isActive('statistics')}
|
)}>
|
||||||
link={Pages.statistics.list}
|
<div className={clx(
|
||||||
activeName='statistics'
|
'flex gap-3 items-center',
|
||||||
/>
|
hasSubMenu && 'flex-col'
|
||||||
)} */}
|
)}>
|
||||||
{/* {checkPermission(PermissionEnum.MANAGE_CONTACTS) && (
|
<Skeleton circle width={20} height={20} />
|
||||||
<SideBarItem
|
<Skeleton width={hasSubMenu ? 40 : 100} height={16} />
|
||||||
icon={<Message variant={isActive('comments') ? 'Bold' : 'Outline'} color={isActive('comments') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
</div>
|
||||||
title={t('sidebar.comments')}
|
</div>
|
||||||
isActive={isActive('comments')}
|
</div>
|
||||||
link={Pages.comments.list}
|
) : (
|
||||||
activeName='comments'
|
|
||||||
/>
|
|
||||||
)} */}
|
|
||||||
|
|
||||||
{checkPermission(PermissionEnum.MANAGE_REPORTS) && (
|
|
||||||
<SideBarItem
|
|
||||||
icon={<SmsEdit variant={isActive('reports') ? 'Bold' : 'Outline'} color={isActive('reports') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
||||||
title={t('sidebar.reports')}
|
|
||||||
isActive={isActive('reports')}
|
|
||||||
link={Pages.reports.list}
|
|
||||||
activeName='reports'
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='flex-1 flex flex-col justify-end mt-14'>
|
|
||||||
<div className='text-xs text-[#8C90A3]'>
|
<div className='text-xs text-[#8C90A3]'>
|
||||||
{checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
|
{/* {checkPermission(PermissionEnum.VIEW_REPORTS) && (
|
||||||
<SideBarItem
|
<SideBarItem
|
||||||
icon={<Setting2 variant={isActive('setting') ? 'Bold' : 'Outline'} color={isActive('setting') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
icon={<Chart1 variant={isActive('statistics') ? 'Bold' : 'Outline'} color={isActive('statistics') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||||
title={t('sidebar.setting')}
|
title={t('sidebar.statistics')}
|
||||||
isActive={isActive('setting')}
|
isActive={isActive('statistics')}
|
||||||
link={Pages.setting}
|
link={Pages.statistics.list}
|
||||||
activeName='settings'
|
activeName='statistics'
|
||||||
|
/>
|
||||||
|
)} */}
|
||||||
|
{/* {checkPermission(PermissionEnum.MANAGE_CONTACTS) && (
|
||||||
|
<SideBarItem
|
||||||
|
icon={<Message variant={isActive('comments') ? 'Bold' : 'Outline'} color={isActive('comments') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||||
|
title={t('sidebar.comments')}
|
||||||
|
isActive={isActive('comments')}
|
||||||
|
link={Pages.comments.list}
|
||||||
|
activeName='comments'
|
||||||
|
/>
|
||||||
|
)} */}
|
||||||
|
|
||||||
|
{checkPermission(PermissionEnum.MANAGE_REPORTS) && (
|
||||||
|
<SideBarItem
|
||||||
|
icon={<SmsEdit variant={isActive('reports') ? 'Bold' : 'Outline'} color={isActive('reports') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||||
|
title={t('sidebar.reports')}
|
||||||
|
isActive={isActive('reports')}
|
||||||
|
link={Pages.reports.list}
|
||||||
|
activeName='reports'
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className='text-xs text-[#8C90A3]'>
|
)}
|
||||||
<SideBarItem
|
|
||||||
icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
<div className='flex-1 flex flex-col justify-end mt-14'>
|
||||||
title={t('sidebar.logout')}
|
{isLoading ? (
|
||||||
isActive={isActive('logout')}
|
<div className='text-xs text-[#8C90A3] px-12 space-y-4'>
|
||||||
link={`#`}
|
<div className={clx(
|
||||||
isLogout
|
'flex gap-9',
|
||||||
activeName=''
|
hasSubMenu && 'flex-col items-center'
|
||||||
/>
|
)}>
|
||||||
</div>
|
<div className={clx(
|
||||||
|
'flex gap-3 items-center',
|
||||||
|
hasSubMenu && 'flex-col'
|
||||||
|
)}>
|
||||||
|
<Skeleton circle width={20} height={20} />
|
||||||
|
<Skeleton width={hasSubMenu ? 40 : 100} height={16} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={clx(
|
||||||
|
'flex gap-9',
|
||||||
|
hasSubMenu && 'flex-col items-center'
|
||||||
|
)}>
|
||||||
|
<div className={clx(
|
||||||
|
'flex gap-3 items-center',
|
||||||
|
hasSubMenu && 'flex-col'
|
||||||
|
)}>
|
||||||
|
<Skeleton circle width={20} height={20} />
|
||||||
|
<Skeleton width={hasSubMenu ? 40 : 100} height={16} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className='text-xs text-[#8C90A3]'>
|
||||||
|
{checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
|
||||||
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user