list of admins
This commit is contained in:
hamid zarghami
+168
-154
@@ -1,158 +1,172 @@
|
||||
import { type FC } from 'react'
|
||||
import LogoImage from '@/assets/images/logo.svg'
|
||||
import { AddSquare, DocumentText, Element3, ElementEqual, Home2, Messages3, MessageText, NotificationStatus, People, Printer, Profile2User, Receipt21, Teacher } from 'iconsax-react'
|
||||
import SideBarItem from './SidebarItem'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { Paths } from '../config/Paths'
|
||||
import { useSharedStore } from './store/useSharedStore'
|
||||
import { clx } from '../helpers/utils'
|
||||
import { t } from '../locale'
|
||||
import Button from '@/components/Button'
|
||||
import { type FC } from 'react';
|
||||
import LogoImage from '@/assets/images/logo.svg';
|
||||
import {
|
||||
AddSquare,
|
||||
DocumentText,
|
||||
Element3,
|
||||
ElementEqual,
|
||||
Home2,
|
||||
Messages3,
|
||||
MessageText,
|
||||
NotificationStatus,
|
||||
People,
|
||||
Printer,
|
||||
Profile2User,
|
||||
Receipt21,
|
||||
Teacher,
|
||||
User,
|
||||
} from 'iconsax-react';
|
||||
import SideBarItem from './SidebarItem';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { Paths } from '../config/Paths';
|
||||
import { useSharedStore } from './store/useSharedStore';
|
||||
import { clx } from '../helpers/utils';
|
||||
import { t } from '../locale';
|
||||
import Button from '@/components/Button';
|
||||
|
||||
const SideBar: FC = () => {
|
||||
const { openSidebar, setOpenSidebar } = useSharedStore();
|
||||
const location = useLocation();
|
||||
|
||||
const { openSidebar, setOpenSidebar } = useSharedStore()
|
||||
const location = useLocation()
|
||||
const isActive = (name: string) => {
|
||||
return location.pathname.includes(name);
|
||||
};
|
||||
|
||||
const isActive = (name: string) => {
|
||||
return location.pathname.includes(name)
|
||||
}
|
||||
const iconSizeSideBar = 20;
|
||||
|
||||
const iconSizeSideBar = 20
|
||||
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-[240px] bg-white flex-col py-12',
|
||||
openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40'
|
||||
)}
|
||||
>
|
||||
<div className="px-6">
|
||||
<div className="flex border-b-2 border-[#F5F7FC] pb-10">
|
||||
<img src={LogoImage} className="w-[120px]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
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-[240px] bg-white flex-col py-12',
|
||||
openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40'
|
||||
)}
|
||||
>
|
||||
<div className='px-6'>
|
||||
<div className='flex border-b-2 border-[#F5F7FC] pb-10'>
|
||||
<img src={LogoImage} className='w-[120px]' />
|
||||
</div>
|
||||
<div className="flex-1 h-full overflow-y-auto no-scrollbar px-6">
|
||||
<div className="mt-10 text-description px-6 text-header text-sm font-bold">{t('sidebar.menu')}</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<SideBarItem
|
||||
icon={<Home2 size={iconSizeSideBar} color="#4F5260" />}
|
||||
title={t('sidebar.mainPage')}
|
||||
isActive={isActive('/home')}
|
||||
link={Paths.home}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<MessageText size={iconSizeSideBar} color="#4F5260" />}
|
||||
title={'درخواست ها'}
|
||||
isActive={isActive('requests')}
|
||||
link={Paths.requests.list}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<Element3 size={iconSizeSideBar} color="#4F5260" />}
|
||||
title={'سفارشات'}
|
||||
isActive={isActive('order')}
|
||||
link={Paths.order.list}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<Receipt21 size={iconSizeSideBar} color="#4F5260" />}
|
||||
title={'پیش فاکتور'}
|
||||
isActive={isActive('/proforma-invoice')}
|
||||
link={Paths.perfomaInvoice.list}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<ElementEqual size={iconSizeSideBar} color="#4F5260" />}
|
||||
title={'محصولات'}
|
||||
isActive={isActive('product')}
|
||||
link={Paths.product.list}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<People size={iconSizeSideBar} color="#4F5260" />}
|
||||
title={'مشتریان'}
|
||||
isActive={isActive('customer')}
|
||||
link={Paths.users.list}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<Printer size={iconSizeSideBar} color="#4F5260" />}
|
||||
title={'چاپ'}
|
||||
isActive={isActive('print')}
|
||||
link={Paths.print.list}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<User size={iconSizeSideBar} color="#4F5260" />}
|
||||
title={'ادمین'}
|
||||
isActive={isActive('admin')}
|
||||
link={Paths.admin.list}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-10 px-6 text-description text-sm font-bold">{t('sidebar.other')}</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<SideBarItem
|
||||
icon={<Profile2User size={iconSizeSideBar} color="#4F5260" />}
|
||||
title={'کاربران'}
|
||||
isActive={isActive('/tickets')}
|
||||
link={Paths.tickets.list}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<Messages3 size={iconSizeSideBar} color="#4F5260" />}
|
||||
title={t('sidebar.tickets')}
|
||||
isActive={isActive('/tickets')}
|
||||
link={Paths.tickets.list}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<NotificationStatus size={iconSizeSideBar} color="#4F5260" />}
|
||||
title={t('sidebar.announcement')}
|
||||
isActive={isActive('/announcement')}
|
||||
link={Paths.announcement.list}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<DocumentText size={iconSizeSideBar} color="#4F5260" />}
|
||||
title={t('sidebar.criticisms')}
|
||||
isActive={isActive('/criticisms')}
|
||||
link={Paths.criticisms.list}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<Teacher size={iconSizeSideBar} color="#4F5260" />}
|
||||
title={t('sidebar.learning')}
|
||||
isActive={isActive('/learning')}
|
||||
link={Paths.learning.list}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 items-end mt-14 pb-8">
|
||||
<div className="bg-[#F5F7FC] rounded-2xl p-4 text-center">
|
||||
<div className="text-[15px] font-medium">{t('sidebar.submitYourOrder')}</div>
|
||||
<div className="mt-2.5 text-[13px] text-[#7B7E8B]">{t('sidebar.submitYourOrderDescription')}</div>
|
||||
<Button className="flex items-center mt-2.5">
|
||||
<div className="flex gap-1">
|
||||
<AddSquare size={iconSizeSideBar} color="black" />
|
||||
<div>{t('sidebar.newOrder')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className='flex-1 h-full overflow-y-auto no-scrollbar px-6'>
|
||||
<div className='mt-10 text-description px-6 text-header text-sm font-bold'>
|
||||
{t('sidebar.menu')}
|
||||
</div>
|
||||
|
||||
<div className='mt-3'>
|
||||
<SideBarItem
|
||||
icon={<Home2 size={iconSizeSideBar} color='#4F5260' />}
|
||||
title={t('sidebar.mainPage')}
|
||||
isActive={isActive('/home')}
|
||||
link={Paths.home}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<MessageText size={iconSizeSideBar} color='#4F5260' />}
|
||||
title={'درخواست ها'}
|
||||
isActive={isActive('requests')}
|
||||
link={Paths.requests.list}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<Element3 size={iconSizeSideBar} color='#4F5260' />}
|
||||
title={'سفارشات'}
|
||||
isActive={isActive('order')}
|
||||
link={Paths.order.list}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<Receipt21 size={iconSizeSideBar} color='#4F5260' />}
|
||||
title={'پیش فاکتور'}
|
||||
isActive={isActive('/proforma-invoice')}
|
||||
link={Paths.perfomaInvoice.list}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<ElementEqual size={iconSizeSideBar} color='#4F5260' />}
|
||||
title={'محصولات'}
|
||||
isActive={isActive('product')}
|
||||
link={Paths.product.list}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<People size={iconSizeSideBar} color='#4F5260' />}
|
||||
title={'مشتریان'}
|
||||
isActive={isActive('customer')}
|
||||
link={Paths.users.list}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<Printer size={iconSizeSideBar} color='#4F5260' />}
|
||||
title={'چاپ'}
|
||||
isActive={isActive('print')}
|
||||
link={Paths.print.list}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div className='mt-10 px-6 text-description text-sm font-bold'>
|
||||
{t('sidebar.other')}
|
||||
</div>
|
||||
|
||||
<div className='mt-3'>
|
||||
|
||||
<SideBarItem
|
||||
icon={<Profile2User size={iconSizeSideBar} color='#4F5260' />}
|
||||
title={'کاربران'}
|
||||
isActive={isActive('/tickets')}
|
||||
link={Paths.tickets.list}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<Messages3 size={iconSizeSideBar} color='#4F5260' />}
|
||||
title={t('sidebar.tickets')}
|
||||
isActive={isActive('/tickets')}
|
||||
link={Paths.tickets.list}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<NotificationStatus size={iconSizeSideBar} color='#4F5260' />}
|
||||
title={t('sidebar.announcement')}
|
||||
isActive={isActive('/announcement')}
|
||||
link={Paths.announcement.list}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<DocumentText size={iconSizeSideBar} color='#4F5260' />}
|
||||
title={t('sidebar.criticisms')}
|
||||
isActive={isActive('/criticisms')}
|
||||
link={Paths.criticisms.list}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<Teacher size={iconSizeSideBar} color='#4F5260' />}
|
||||
title={t('sidebar.learning')}
|
||||
isActive={isActive('/learning')}
|
||||
link={Paths.learning.list}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div className='flex-1 items-end mt-14 pb-8'>
|
||||
|
||||
<div className='bg-[#F5F7FC] rounded-2xl p-4 text-center'>
|
||||
<div className='text-[15px] font-medium'>{t('sidebar.submitYourOrder')}</div>
|
||||
<div className='mt-2.5 text-[13px] text-[#7B7E8B]'>{t('sidebar.submitYourOrderDescription')}</div>
|
||||
<Button
|
||||
className='flex items-center mt-2.5'
|
||||
>
|
||||
<div className='flex gap-1'>
|
||||
<AddSquare size={iconSizeSideBar} color='black' />
|
||||
<div>{t('sidebar.newOrder')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* <div className='text-xs text-[#8C90A3]'>
|
||||
{/* <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')}
|
||||
@@ -161,11 +175,11 @@ const SideBar: FC = () => {
|
||||
isLogout
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SideBar
|
||||
export default SideBar;
|
||||
|
||||
Reference in New Issue
Block a user