hamid zarghami
303 lines
15 KiB
TypeScript
303 lines
15 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 {
|
|
Home2,
|
|
Element3,
|
|
Receipt21,
|
|
TicketDiscount,
|
|
DocumentText,
|
|
Truck,
|
|
Money3,
|
|
UserSquare,
|
|
Chart,
|
|
Setting2,
|
|
Logout,
|
|
Briefcase,
|
|
Headphone,
|
|
} from 'iconsax-react'
|
|
import SideBarItem from './SideBarItem'
|
|
import { useLocation } from 'react-router-dom'
|
|
import { useSharedStore } from './store/sharedStore'
|
|
import { clx } from '../helpers/utils'
|
|
import BlogSubMenu from './components/BlogSubMenu'
|
|
import ShippingSubMenu from './components/ShippingSubMenu'
|
|
import DashboardSubMenu from './components/DashboardSubMenu'
|
|
import ProductsSubMenu from './components/ProductsSubMenu'
|
|
import OrdersSubMenu from './components/OrdersSubMenu'
|
|
import FinancialSubMenu from './components/FinancialSubMenu'
|
|
import SellersSubMenu from './components/SellersSubMenu'
|
|
import BuyersSubMenu from './components/BuyersSubMenu'
|
|
import UsersSubMenu from './components/UsersSubMenu'
|
|
import TicketsSubMenu from './components/TicketsSubMenu'
|
|
import ReportsSubMenu from './components/ReportsSubMenu'
|
|
import ChatSubMenu from './components/ChatSubMenu'
|
|
import ContactSubMenu from './components/ContactSubMenu'
|
|
import SettingsSubMenu from './components/SettingsSubMenu'
|
|
import PagesSubMenu from './components/PagesSubMenu'
|
|
import JobsSubMenu from './components/JobsSubMenu'
|
|
import CategorySubMenu from './components/CategorySubMenu'
|
|
import { Pages } from '../config/Pages'
|
|
|
|
|
|
const SideBar: FC = () => {
|
|
|
|
const { t } = useTranslation('global')
|
|
const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
|
|
const location = useLocation()
|
|
|
|
const isActive = (name: string) => {
|
|
return window.location.href.includes(name)
|
|
}
|
|
|
|
useEffect(() => {
|
|
const split = location.pathname.split('/')
|
|
|
|
if (split[1] === 'dashboard' || split[1] === 'products' || split[1] === 'orders' ||
|
|
split[1] === 'blog' || split[1] === 'shipment' || split[1] === 'financial' ||
|
|
split[1] === 'sellers' || split[1] === 'buyers' || split[1] === 'admin' ||
|
|
split[1] === 'tickets' || split[1] === 'reports' || split[1] === 'chat' ||
|
|
split[1] === 'contact' || split[1] === 'settings' || split[1] === 'pages' ||
|
|
split[1] === 'jobs' || split[1] === 'category') {
|
|
setSubMenuName(split[1])
|
|
setSubtMenu(true)
|
|
} else {
|
|
setSubMenuName('')
|
|
setSubtMenu(false)
|
|
}
|
|
}, [location.pathname, setSubMenuName, setSubtMenu])
|
|
|
|
const iconSizeSideBar = 20
|
|
|
|
return (
|
|
<>
|
|
{
|
|
openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black/50 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-[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') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title="داشبورد"
|
|
isActive={isActive('dashboard')}
|
|
link="/dashboard"
|
|
activeName='dashboard'
|
|
/>
|
|
|
|
{/* محصولات */}
|
|
<SideBarItem
|
|
icon={<Element3 variant={isActive('products') ? 'Bold' : 'Outline'} color={isActive('products') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title="محصولات"
|
|
isActive={isActive('products')}
|
|
link={Pages.products.list}
|
|
activeName='products'
|
|
/>
|
|
|
|
{/* سفارشات */}
|
|
<SideBarItem
|
|
icon={<Receipt21 variant={isActive('orders') ? 'Bold' : 'Outline'} color={isActive('orders') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title="سفارشات"
|
|
isActive={isActive('orders')}
|
|
link="/orders"
|
|
activeName='orders'
|
|
/>
|
|
|
|
{/* تخفیف ها */}
|
|
<SideBarItem
|
|
icon={<TicketDiscount variant={isActive('coupon') ? 'Bold' : 'Outline'} color={isActive('coupon') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title="تخفیف ها"
|
|
isActive={isActive('coupon')}
|
|
link={Pages.coupon.list}
|
|
activeName='coupon'
|
|
/>
|
|
|
|
{/* بلاگ */}
|
|
<SideBarItem
|
|
icon={<DocumentText variant={isActive('blog') ? 'Bold' : 'Outline'} color={isActive('blog') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title="بلاگ"
|
|
isActive={isActive('blog')}
|
|
link="/blog"
|
|
activeName='blog'
|
|
/>
|
|
|
|
{/* روش های ارسال */}
|
|
<SideBarItem
|
|
icon={<Truck variant={isActive('shipment') ? 'Bold' : 'Outline'} color={isActive('shipment') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title="روش های ارسال"
|
|
isActive={isActive('shipment')}
|
|
link={Pages.shipment.list}
|
|
activeName='shipment'
|
|
/>
|
|
|
|
{/* مالی */}
|
|
<SideBarItem
|
|
icon={<Money3 variant={isActive('financial') ? 'Bold' : 'Outline'} color={isActive('financial') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title="مالی"
|
|
isActive={isActive('financial')}
|
|
link={Pages.financial.list}
|
|
activeName='financial'
|
|
/>
|
|
|
|
{/* فروشندگان */}
|
|
{/* <SideBarItem
|
|
icon={<People variant={isActive('sellers') ? 'Bold' : 'Outline'} color={isActive('sellers') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title="فروشندگان"
|
|
isActive={isActive('sellers')}
|
|
link={Pages.sellers.list}
|
|
activeName='sellers'
|
|
/> */}
|
|
|
|
{/* خریداران */}
|
|
<SideBarItem
|
|
icon={<UserSquare variant={isActive('buy-users') ? 'Bold' : 'Outline'} color={isActive('buy-users') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title="خریداران"
|
|
isActive={isActive('buy-users')}
|
|
link={Pages.buyUsers.list}
|
|
activeName='buy-users'
|
|
/>
|
|
|
|
{/* کاربران */}
|
|
{/* <SideBarItem
|
|
icon={<Profile variant={isActive('/admin') ? 'Bold' : 'Outline'} color={isActive('/admin') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title="ادمین ها"
|
|
isActive={isActive('/admin')}
|
|
link={Pages.admin.list}
|
|
activeName='/admin'
|
|
/> */}
|
|
|
|
{/* تیکت ها */}
|
|
{/* <SideBarItem
|
|
icon={<Messages3 variant={isActive('tickets') ? 'Bold' : 'Outline'} color={isActive('tickets') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title="تیکت ها"
|
|
isActive={isActive('tickets')}
|
|
link={Pages.ticket.list}
|
|
activeName='tickets'
|
|
/> */}
|
|
|
|
{/* گزارش ها */}
|
|
<SideBarItem
|
|
icon={<Chart variant={isActive('reports') ? 'Bold' : 'Outline'} color={isActive('reports') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title="گزارش ها"
|
|
isActive={isActive('reports')}
|
|
link={Pages.report.product}
|
|
activeName='reports'
|
|
/>
|
|
|
|
{/* گفت و گو */}
|
|
{/* <SideBarItem
|
|
icon={<SmsTracking variant={isActive('chat') ? 'Bold' : 'Outline'} color={isActive('chat') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title="گفت و گو"
|
|
isActive={isActive('chat')}
|
|
link={Pages.messages.list}
|
|
activeName='chat'
|
|
/> */}
|
|
|
|
{/* ارتباط با ما */}
|
|
<SideBarItem
|
|
icon={<Headphone variant={isActive('contact') ? 'Bold' : 'Outline'} color={isActive('contact') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title="ارتباط با ما"
|
|
isActive={isActive('contact')}
|
|
link={Pages.contactUs.list}
|
|
activeName='contact'
|
|
/>
|
|
|
|
{/* تنظیمات */}
|
|
<SideBarItem
|
|
icon={<Setting2 variant={isActive('settings') ? 'Bold' : 'Outline'} color={isActive('settings') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title="تنظیمات"
|
|
isActive={isActive('settings')}
|
|
link="/settings"
|
|
activeName='settings'
|
|
/>
|
|
|
|
{/* مدیریت صفحات */}
|
|
<SideBarItem
|
|
icon={<DocumentText variant={isActive('pages') ? 'Bold' : 'Outline'} color={isActive('pages') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title="مدیریت صفحات"
|
|
isActive={isActive('pages')}
|
|
link={Pages.pages.aboutUs}
|
|
activeName='pages'
|
|
/>
|
|
|
|
{/* مشاغل */}
|
|
<SideBarItem
|
|
icon={<Briefcase variant={isActive('jobs') ? 'Bold' : 'Outline'} color={isActive('jobs') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title="مشاغل"
|
|
isActive={isActive('jobs')}
|
|
link={Pages.jobs.list}
|
|
activeName='jobs'
|
|
/>
|
|
</div>
|
|
|
|
<div className='flex-1 flex flex-col justify-end mt-14'>
|
|
<div className='text-xs text-[#8C90A3]'>
|
|
<SideBarItem
|
|
icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? '#da2129' : '#8C90A3'} size={iconSizeSideBar} />}
|
|
title="خروج"
|
|
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 === 'blog' ? <BlogSubMenu />
|
|
: subMenuName === 'dashboard' ? <DashboardSubMenu />
|
|
: subMenuName === 'products' ? <ProductsSubMenu />
|
|
: subMenuName === 'orders' ? <OrdersSubMenu />
|
|
: subMenuName === 'shipment' ? <ShippingSubMenu />
|
|
: subMenuName === 'financial' ? <FinancialSubMenu />
|
|
: subMenuName === 'sellers' ? <SellersSubMenu />
|
|
: subMenuName === 'buy-users' ? <BuyersSubMenu />
|
|
: subMenuName === 'admin' ? <UsersSubMenu />
|
|
: subMenuName === 'tickets' ? <TicketsSubMenu />
|
|
: subMenuName === 'reports' ? <ReportsSubMenu />
|
|
: subMenuName === 'chat' ? <ChatSubMenu />
|
|
: subMenuName === 'contact-us' ? <ContactSubMenu />
|
|
: subMenuName === 'settings' ? <SettingsSubMenu />
|
|
: subMenuName === 'pages' ? <PagesSubMenu />
|
|
: subMenuName === 'jobs' ? <JobsSubMenu />
|
|
: subMenuName === 'category' ? <CategorySubMenu />
|
|
: null
|
|
}
|
|
</div>
|
|
}
|
|
</>
|
|
)
|
|
}
|
|
|
|
|
|
export default SideBar |