danak/dmenu-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add skeleton for get permission

Browse Source
This commit is contained in:
hamid zarghami
2025-12-27 10:18:40 +03:30
parent a90731c5a3
commit 201a084a3b
1 changed files with 251 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/SideBar.tsx
+71 -5
View File
@@ -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>
{isLoading ? (
<div className='text-xs text-[#8C90A3] mt-4 px-12 space-y-4'>
{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]'> <div className='text-xs text-[#8C90A3]'>
{ {checkPermission(PermissionEnum.MANAGE_REPORTS) && (
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,8 +100,7 @@ const SideBar: FC = () => {
link={Pages.dashboard} link={Pages.dashboard}
activeName='' activeName=''
/> />
) )}
}
{checkPermission(PermissionEnum.MANAGE_ORDERS) && ( {checkPermission(PermissionEnum.MANAGE_ORDERS) && (
<SideBarItem <SideBarItem
@@ -218,6 +235,7 @@ const SideBar: FC = () => {
) )
} }
</div> </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,6 +244,22 @@ const SideBar: FC = () => {
{t('sidebar.other')} {t('sidebar.other')}
</div> </div>
{isLoading ? (
<div className='text-xs text-[#8C90A3] mt-4 px-12 space-y-4'>
<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]'> <div className='text-xs text-[#8C90A3]'>
{/* {checkPermission(PermissionEnum.VIEW_REPORTS) && ( {/* {checkPermission(PermissionEnum.VIEW_REPORTS) && (
<SideBarItem <SideBarItem
@@ -256,8 +290,38 @@ const SideBar: FC = () => {
/> />
)} )}
</div> </div>
)}
<div className='flex-1 flex flex-col justify-end mt-14'> <div className='flex-1 flex flex-col justify-end mt-14'>
{isLoading ? (
<div className='text-xs text-[#8C90A3] px-12 space-y-4'>
<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 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]'> <div className='text-xs text-[#8C90A3]'>
{checkPermission(PermissionEnum.MANAGE_SETTINGS) && ( {checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
<SideBarItem <SideBarItem
@@ -279,6 +343,8 @@ const SideBar: FC = () => {
activeName='' activeName=''
/> />
</div> </div>
</>
)}
</div> </div>
</div> </div>
</div> </div>