hamid zarghami
139 lines
6.0 KiB
TypeScript
139 lines
6.0 KiB
TypeScript
import { type FC } from 'react'
|
|
import LogoImage from '@/assets/images/logo.svg'
|
|
import { AddSquare, DocumentText, Element3, Home2, Messages3, NotificationStatus, Receipt21, Teacher } from 'iconsax-react'
|
|
import SideBarItem from './SidebarItem'
|
|
import { Link, 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 isActive = (name: string) => {
|
|
return location.pathname.includes(name)
|
|
}
|
|
|
|
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'>
|
|
<Link to={Paths.home}>
|
|
<img src={LogoImage} className='w-[120px]' />
|
|
</Link>
|
|
</div>
|
|
</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={<Element3 size={iconSizeSideBar} color='#4F5260' />}
|
|
title={t('sidebar.myOrders')}
|
|
isActive={isActive('/my-orders')}
|
|
link={Paths.myOrders}
|
|
/>
|
|
|
|
<SideBarItem
|
|
icon={<Receipt21 size={iconSizeSideBar} color='#4F5260' />}
|
|
title={t('sidebar.preFactors')}
|
|
isActive={isActive('/proforma-invoice')}
|
|
link={Paths.proformaInvoice}
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div className='mt-10 px-6 text-description text-sm font-bold'>
|
|
{t('sidebar.other')}
|
|
</div>
|
|
|
|
<div className='mt-3'>
|
|
<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}
|
|
/>
|
|
|
|
<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>
|
|
<Link to={Paths.newOrder}>
|
|
<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>
|
|
</Link>
|
|
</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
|
|
/>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default SideBar |