hamid zarghami
235 lines
12 KiB
TypeScript
235 lines
12 KiB
TypeScript
import { type FC, useEffect } from 'react'
|
|
import LogoImage from '../assets/images/logo.svg'
|
|
import LogoSmall from '../assets/images/logo-small.svg'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { DocumentText, Home2, Logout, Message, NotificationStatus, People, Setting2, TicketDiscount, Chart, Calendar, Security, Card, SecurityUser, TruckFast, Element3 } from 'iconsax-react'
|
|
import SideBarItem from './SideBarItem'
|
|
import { useLocation } from 'react-router-dom'
|
|
import { Pages } from '../config/Pages'
|
|
import { useSharedStore } from './store/sharedStore'
|
|
import { clx } from '../helpers/utils'
|
|
import FoodsSubMenu from './components/FoodsSubMenu'
|
|
import OrdersSubMenu from './components/OrdersSubMenu'
|
|
import CustomersSubMenu from './components/CustomersSubMenu'
|
|
import DiscountSubMenu from './components/DiscountSubMenu'
|
|
import { SideBarItemHasSubMenu } from '../config/SideBarSubMenu'
|
|
const SideBar: FC = () => {
|
|
|
|
const { t } = useTranslation('global')
|
|
const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
|
|
const location = useLocation()
|
|
|
|
const isActive = (name: string) => {
|
|
return location.pathname.includes(name)
|
|
}
|
|
|
|
useEffect(() => {
|
|
const split = location.pathname.split('/')
|
|
|
|
if (SideBarItemHasSubMenu.includes(split[1])) {
|
|
setSubMenuName(split[1])
|
|
setSubtMenu(true)
|
|
} else {
|
|
setSubMenuName('')
|
|
setSubtMenu(false)
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [location.pathname])
|
|
|
|
const iconSizeSideBar = 20
|
|
|
|
|
|
return (
|
|
<>
|
|
{
|
|
openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black/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-[250px] bg-white flex-col py-12',
|
|
openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40',
|
|
hasSubMenu && 'w-24 !rounded-tl-none !rounded-bl-none'
|
|
)}
|
|
>
|
|
<div className='flex justify-center'>
|
|
{
|
|
!hasSubMenu ?
|
|
<img src={LogoImage} className='w-[140px]' />
|
|
:
|
|
<img src={LogoSmall} className='w-7' />
|
|
}
|
|
</div>
|
|
|
|
<div className='flex-1 flex flex-col h-full overflow-y-auto no-scrollbar'>
|
|
<div className={clx(
|
|
'mt-10 px-12 text-header text-sm font-normal',
|
|
hasSubMenu && 'px-2 text-center'
|
|
)}>
|
|
{t('sidebar.menu')}
|
|
</div>
|
|
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<Home2 variant={isActive('dashboard') ? 'Bold' : 'Outline'} color={isActive('dashboard') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.mainpage')}
|
|
isActive={isActive('dashboard')}
|
|
link={Pages.dashboard}
|
|
activeName=''
|
|
/>
|
|
|
|
<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'
|
|
/>
|
|
|
|
<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'
|
|
/>
|
|
|
|
<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'
|
|
/>
|
|
|
|
<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'
|
|
/>
|
|
<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'
|
|
/>
|
|
|
|
<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'
|
|
/>
|
|
|
|
<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'
|
|
/>
|
|
|
|
<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'
|
|
/>
|
|
|
|
<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'
|
|
/>
|
|
</div>
|
|
|
|
<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]'>
|
|
<SideBarItem
|
|
icon={<NotificationStatus variant={isActive('announcements') ? 'Bold' : 'Outline'} color={isActive('announcements') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title={t('sidebar.announcements')}
|
|
isActive={isActive('announcements')}
|
|
link={Pages.announcements.list}
|
|
activeName='announcements'
|
|
/>
|
|
<SideBarItem
|
|
icon={<Chart 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'
|
|
/>
|
|
<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'
|
|
/>
|
|
</div>
|
|
|
|
<div className='flex-1 flex flex-col justify-end mt-14'>
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<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>
|
|
|
|
{
|
|
hasSubMenu && (openSidebar || window.innerWidth > 1139) &&
|
|
<div className='fixed xl:right-[112px] right-[96px] bg-white z-20 xl:top-4 xl:bottom-4 top-0 bottom-0 rounded-tl-[32px] rounded-bl-[32px] w-[190px] border-r border-border'>
|
|
{
|
|
subMenuName === 'foods' ?
|
|
<FoodsSubMenu />
|
|
: subMenuName === 'orders' ?
|
|
<OrdersSubMenu />
|
|
: subMenuName === 'customers' ?
|
|
<CustomersSubMenu />
|
|
: subMenuName === 'discounts' ?
|
|
<DiscountSubMenu />
|
|
: null
|
|
}
|
|
</div>
|
|
}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default SideBar |