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

sidebar + permission header

Browse Source
This commit is contained in:
hamid zarghami
2025-04-20 15:45:34 +03:30
parent a946d7f6e9
commit 36d56dfe20
17 changed files with 975 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/Header.tsx
+68 -23
View File
@@ -1,25 +1,30 @@
import { FC } from 'react'
import { FC, useEffect, useState } from 'react'
import Input from '../components/Input'
import { ArrowDown2, Element3, HambergerMenu, Wallet } from 'iconsax-react'
import AvatarImage from '../assets/images/Avatar.png'
import { ArrowDown2, CloseCircle, Element3, HambergerMenu, Logout, Wallet } from 'iconsax-react'
import AvatarImage from '../assets/images/avatar_image.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 { clx } from '../helpers/utils'
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, hasSubMenu } = useSharedStore()
const { setOpenSidebar, openSidebar } = useSharedStore()
const { data } = useGetProfile()
useEffect(() => {
setPopoverKey((prevKey) => prevKey + 1);
}, [location.pathname]);
return (
<div className={clx(
'fixed z-10 right-4 left-4 xl:right-[291px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] xl:w-[calc(100%-308px)]',
hasSubMenu && 'xl:right-[318px] xl:w-[calc(100%-344px)]',
)}>
<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)]'>
<div className='min-w-[270px] hidden xl:block'>
<Input
@@ -32,22 +37,62 @@ const Header: FC = () => {
</div>
{/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
<div className='flex xl:gap-6 gap-4 items-center'>
<Element3 color='black' className='xl:size-[18px] size-[17px]' />
<Link to={Pages.wallet}>
<Link to={Pages.services.other}>
<Element3 color='black' className='xl:size-[18px] size-[17px]' />
</Link>
<Link className='xl:hidden' to={Pages.wallet}>
<Wallet className='xl:size-[18px] size-[17px]' color='black' />
</Link>
<Notifications />
<div className='flex gap-2 items-center'>
<div className='size-6 rounded-full bg-description overflow-hidden'>
<Link to={Pages.profile}>
<img src={AvatarImage} className='size-full object-cover' />
</Link>
</div>
<div className='xl:flex hidden gap-1 items-center'>
<div className='text-xs'>مهرداد مظفری</div>
<ArrowDown2 size={14} color='#8C90A3' />
</div>
</div>
{
data && (
<Popover className="relative" key={popoverKey}>
<PopoverButton >
<div className='flex gap-2 items-center mt-2.5'>
<div className='size-6 rounded-full bg-description overflow-hidden'>
<img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
</div>
<div className='xl:flex hidden gap-1 items-center'>
<div className='text-xs'>
{data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
</div>
<ArrowDown2 size={14} color='#8C90A3' />
</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 shadow-md">
<div className='absolute xl:hidden top-6 left-6'>
<CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
</div>
<Link to={Pages.profile} 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={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : 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>
</Link>
<div className='px-6 -mt-[2px]'>
<SideBarItem
icon={<Logout color={'black'} size={20} />}
title={t('sidebar.logout')}
isActive
link={Pages.setting}
isLogout
/>
</div>
</PopoverPanel>
</Popover>
)
}
</div>
</div>
)
src/shared/SideBar.tsx
+22 -12
View File
@@ -16,11 +16,13 @@ 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'
const SideBar: FC = () => {
const { t } = useTranslation('global')
const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
const location = useLocation()
const { data: profile } = useGetProfile()
const isActive = (name: string) => {
return location.pathname.includes(name)
}
@@ -158,12 +160,17 @@ const SideBar: FC = () => {
/>
</div>
<div className={clx(
'mt-10 px-12 text-header text-sm font-normal',
hasSubMenu && 'px-2 text-center'
)}>
{t('sidebar.other')}
</div>
{
profile?.data?.user?.roles.some((role: { name: string }) => role.name === 'super_admin') &&
<div className={clx(
'mt-10 px-12 text-header text-sm font-normal',
hasSubMenu && 'px-2 text-center'
)}>
{t('sidebar.other')}
</div>
}
<div className='text-xs text-[#8C90A3]'>
@@ -186,13 +193,16 @@ const SideBar: FC = () => {
/>
</div>
{
profile?.data?.user?.roles?.some((role: { name: string }) => role.name === 'super_admin') &&
<div className={clx(
'mt-10 px-12 text-header text-sm font-normal',
hasSubMenu && 'px-2 text-center text-xs'
)}>
{t('sidebar.mnage_content')}
</div>
}
<div className={clx(
'mt-10 px-12 text-header text-sm font-normal',
hasSubMenu && 'px-2 text-center text-xs'
)}>
{t('sidebar.mnage_content')}
</div>
<div className='text-xs text-[#8C90A3]'>
<SideBarItem