This commit is contained in:
hamid zarghami
+260
-308
@@ -1,173 +1,151 @@
|
||||
import { type FC, useEffect } from 'react'
|
||||
import LogoImage from '../assets/images/logo.svg'
|
||||
import LogoSmall from '../assets/images/logo-small.png'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { DocumentText, Home2, Logout, People, Setting2, TicketDiscount, Calendar, Security, Card, SecurityUser, TruckFast, Element3, Star1, NotificationBing, SmsEdit } 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 ProductsSubMenu from './components/ProductsSubMenu'
|
||||
import OrdersSubMenu from './components/OrdersSubMenu'
|
||||
import CustomersSubMenu from './components/CustomersSubMenu'
|
||||
import DiscountSubMenu from './components/DiscountSubMenu'
|
||||
import { SideBarItemHasSubMenu } from '../config/SideBarSubMenu'
|
||||
import { usePermissions } from '@/hooks/usePermissions'
|
||||
import { PermissionEnum } from '@/pages/roles/enum/Enum'
|
||||
import Skeleton from 'react-loading-skeleton'
|
||||
import { usePermissions } from "@/hooks/usePermissions";
|
||||
import { PermissionEnum } from "@/pages/roles/enum/Enum";
|
||||
import { Calendar, Card, DocumentText, Element3, Home2, Logout, People, Security, SecurityUser, Setting2, SmsEdit, Star1, TicketDiscount, TruckFast } from "iconsax-react";
|
||||
import { type FC, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import LogoSmall from "../assets/images/logo-small.png";
|
||||
import LogoImage from "../assets/images/logo.svg";
|
||||
import { Pages } from "../config/Pages";
|
||||
import { SideBarItemHasSubMenu } from "../config/SideBarSubMenu";
|
||||
import { clx } from "../helpers/utils";
|
||||
import CustomersSubMenu from "./components/CustomersSubMenu";
|
||||
import DiscountSubMenu from "./components/DiscountSubMenu";
|
||||
import OrdersSubMenu from "./components/OrdersSubMenu";
|
||||
import ProductsSubMenu from "./components/ProductsSubMenu";
|
||||
import SideBarItem from "./SideBarItem";
|
||||
import { useSharedStore } from "./store/sharedStore";
|
||||
|
||||
const SideBar: FC = () => {
|
||||
const { t } = useTranslation("global");
|
||||
const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore();
|
||||
const location = useLocation();
|
||||
const { checkPermission, isLoading } = usePermissions();
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
|
||||
const location = useLocation()
|
||||
const { checkPermission, isLoading } = usePermissions()
|
||||
const isActive = (name: string) => {
|
||||
return location.pathname.includes(name);
|
||||
};
|
||||
|
||||
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]);
|
||||
|
||||
useEffect(() => {
|
||||
const split = location.pathname.split('/')
|
||||
const iconSizeSideBar = 20;
|
||||
|
||||
if (SideBarItemHasSubMenu.includes(split[1])) {
|
||||
setSubMenuName(split[1])
|
||||
setSubtMenu(true)
|
||||
} else {
|
||||
setSubMenuName('')
|
||||
setSubtMenu(false)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [location.pathname])
|
||||
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 duration-300",
|
||||
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>
|
||||
|
||||
const iconSizeSideBar = 20
|
||||
<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>
|
||||
|
||||
|
||||
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 duration-300',
|
||||
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' />
|
||||
}
|
||||
{isLoading ? (
|
||||
<div className="text-xs text-[#8C90A3] mt-4 px-12 space-y-4">
|
||||
{Array.from({ length: 8 }).map((_, index) => (
|
||||
<div key={index} className={clx("flex gap-9", hasSubMenu && "flex-col items-center")}>
|
||||
<div className={clx("flex gap-3 items-center", hasSubMenu && "flex-col")}>
|
||||
<Skeleton circle width={20} height={20} />
|
||||
<Skeleton width={hasSubMenu ? 40 : 100} height={16} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-xs text-[#8C90A3]">
|
||||
{checkPermission(PermissionEnum.MANAGE_REPORTS) && (
|
||||
<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=""
|
||||
/>
|
||||
)}
|
||||
|
||||
<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>
|
||||
{checkPermission(PermissionEnum.MANAGE_ORDERS) && (
|
||||
<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"
|
||||
/>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<div className='text-xs text-[#8C90A3] mt-4 px-12 space-y-4'>
|
||||
{Array.from({ length: 8 }).map((_, index) => (
|
||||
<div key={index} className={clx(
|
||||
'flex gap-9',
|
||||
hasSubMenu && 'flex-col items-center'
|
||||
)}>
|
||||
<div className={clx(
|
||||
'flex gap-3 items-center',
|
||||
hasSubMenu && 'flex-col'
|
||||
)}>
|
||||
<Skeleton circle width={20} height={20} />
|
||||
<Skeleton width={hasSubMenu ? 40 : 100} height={16} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
{checkPermission(PermissionEnum.MANAGE_REPORTS) && (
|
||||
<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=''
|
||||
/>
|
||||
)}
|
||||
{checkPermission(PermissionEnum.MANAGE_FOODS) && (
|
||||
<SideBarItem
|
||||
icon={<Element3 variant={isActive("products") ? "Bold" : "Outline"} color={isActive("products") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
|
||||
title={t("sidebar.foods")}
|
||||
isActive={isActive("products")}
|
||||
link={Pages.products.list}
|
||||
activeName="products"
|
||||
/>
|
||||
)}
|
||||
|
||||
{checkPermission(PermissionEnum.MANAGE_ORDERS) && (
|
||||
<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'
|
||||
/>
|
||||
)}
|
||||
{checkPermission(PermissionEnum.MANAGE_SCHEDULES) && (
|
||||
<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"
|
||||
/>
|
||||
)}
|
||||
|
||||
{checkPermission(PermissionEnum.MANAGE_FOODS) && (
|
||||
<SideBarItem
|
||||
icon={<Element3 variant={isActive('products') ? 'Bold' : 'Outline'} color={isActive('products') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.foods')}
|
||||
isActive={isActive('products')}
|
||||
link={Pages.products.list}
|
||||
activeName='products'
|
||||
/>
|
||||
)}
|
||||
{checkPermission(PermissionEnum.MANAGE_PAYMENTS) && (
|
||||
<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"
|
||||
/>
|
||||
)}
|
||||
|
||||
{checkPermission(PermissionEnum.MANAGE_SCHEDULES) && (
|
||||
<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'
|
||||
/>
|
||||
)}
|
||||
{checkPermission(PermissionEnum.MANAGE_USERS) && (
|
||||
<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"
|
||||
/>
|
||||
)}
|
||||
|
||||
{checkPermission(PermissionEnum.MANAGE_PAYMENTS) && (
|
||||
<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'
|
||||
/>
|
||||
)}
|
||||
{checkPermission(PermissionEnum.MANAGE_REVIEWS) && (
|
||||
<SideBarItem
|
||||
icon={<Star1 variant={isActive("reviews") ? "Bold" : "Outline"} color={isActive("reviews") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
|
||||
title={t("sidebar.reviews")}
|
||||
isActive={isActive("reviews")}
|
||||
link={Pages.reviews.list}
|
||||
name="reviews"
|
||||
activeName="reviews"
|
||||
/>
|
||||
)}
|
||||
|
||||
{checkPermission(PermissionEnum.MANAGE_USERS) && (
|
||||
<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'
|
||||
/>
|
||||
)}
|
||||
|
||||
{checkPermission(PermissionEnum.MANAGE_REVIEWS) && (
|
||||
<SideBarItem
|
||||
icon={<Star1 variant={isActive('reviews') ? 'Bold' : 'Outline'} color={isActive('reviews') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.reviews')}
|
||||
isActive={isActive('reviews')}
|
||||
link={Pages.reviews.list}
|
||||
name='reviews'
|
||||
activeName='reviews'
|
||||
/>
|
||||
)}
|
||||
|
||||
{checkPermission(PermissionEnum.MANAGE_PAGER) && (
|
||||
{/* {checkPermission(PermissionEnum.MANAGE_PAGER) && (
|
||||
<SideBarItem
|
||||
icon={<NotificationBing variant={isActive('pagers') ? 'Bold' : 'Outline'} color={isActive('pagers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.pagers')}
|
||||
@@ -176,53 +154,53 @@ const SideBar: FC = () => {
|
||||
name='pagers'
|
||||
activeName='pagers'
|
||||
/>
|
||||
)}
|
||||
)} */}
|
||||
|
||||
{checkPermission(PermissionEnum.MANAGE_ADMINS) && (
|
||||
<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'
|
||||
/>
|
||||
)}
|
||||
{checkPermission(PermissionEnum.MANAGE_ADMINS) && (
|
||||
<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"
|
||||
/>
|
||||
)}
|
||||
|
||||
{checkPermission(PermissionEnum.MANAGE_DELIVERY) && (
|
||||
<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'
|
||||
/>
|
||||
)}
|
||||
{checkPermission(PermissionEnum.MANAGE_DELIVERY) && (
|
||||
<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"
|
||||
/>
|
||||
)}
|
||||
|
||||
{checkPermission(PermissionEnum.MANAGE_COUPONS) && (
|
||||
<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'
|
||||
/>
|
||||
)}
|
||||
{checkPermission(PermissionEnum.MANAGE_COUPONS) && (
|
||||
<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"
|
||||
/>
|
||||
)}
|
||||
|
||||
{checkPermission(PermissionEnum.MANAGE_ROLES) && (
|
||||
<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'
|
||||
/>
|
||||
)}
|
||||
{checkPermission(PermissionEnum.MANAGE_ROLES) && (
|
||||
<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"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* {
|
||||
{/* {
|
||||
checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
|
||||
<SideBarItem
|
||||
icon={<NotificationStatus variant={isActive('notifications') ? 'Bold' : 'Outline'} color={isActive('notifications') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
@@ -234,34 +212,23 @@ const SideBar: FC = () => {
|
||||
/>
|
||||
)
|
||||
} */}
|
||||
</div>
|
||||
)}
|
||||
</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={clx("mt-10 px-12 text-header text-sm font-normal", hasSubMenu && "px-2 text-center")}>{t("sidebar.other")}</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className='text-xs text-[#8C90A3] mt-4 px-12 space-y-4'>
|
||||
<div className={clx(
|
||||
'flex gap-9',
|
||||
hasSubMenu && 'flex-col items-center'
|
||||
)}>
|
||||
<div className={clx(
|
||||
'flex gap-3 items-center',
|
||||
hasSubMenu && 'flex-col'
|
||||
)}>
|
||||
<Skeleton circle width={20} height={20} />
|
||||
<Skeleton width={hasSubMenu ? 40 : 100} height={16} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
{/* {checkPermission(PermissionEnum.VIEW_REPORTS) && (
|
||||
{isLoading ? (
|
||||
<div className="text-xs text-[#8C90A3] mt-4 px-12 space-y-4">
|
||||
<div className={clx("flex gap-9", hasSubMenu && "flex-col items-center")}>
|
||||
<div className={clx("flex gap-3 items-center", hasSubMenu && "flex-col")}>
|
||||
<Skeleton circle width={20} height={20} />
|
||||
<Skeleton width={hasSubMenu ? 40 : 100} height={16} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-xs text-[#8C90A3]">
|
||||
{/* {checkPermission(PermissionEnum.VIEW_REPORTS) && (
|
||||
<SideBarItem
|
||||
icon={<Chart1 variant={isActive('statistics') ? 'Bold' : 'Outline'} color={isActive('statistics') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.statistics')}
|
||||
@@ -270,7 +237,7 @@ const SideBar: FC = () => {
|
||||
activeName='statistics'
|
||||
/>
|
||||
)} */}
|
||||
{/* {checkPermission(PermissionEnum.MANAGE_CONTACTS) && (
|
||||
{/* {checkPermission(PermissionEnum.MANAGE_CONTACTS) && (
|
||||
<SideBarItem
|
||||
icon={<Message variant={isActive('comments') ? 'Bold' : 'Outline'} color={isActive('comments') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.comments')}
|
||||
@@ -280,93 +247,78 @@ const SideBar: FC = () => {
|
||||
/>
|
||||
)} */}
|
||||
|
||||
{checkPermission(PermissionEnum.MANAGE_REPORTS) && (
|
||||
<SideBarItem
|
||||
icon={<SmsEdit 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'
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='flex-1 flex flex-col justify-end mt-14'>
|
||||
{isLoading ? (
|
||||
<div className='text-xs text-[#8C90A3] px-12 space-y-4'>
|
||||
<div className={clx(
|
||||
'flex gap-9',
|
||||
hasSubMenu && 'flex-col items-center'
|
||||
)}>
|
||||
<div className={clx(
|
||||
'flex gap-3 items-center',
|
||||
hasSubMenu && 'flex-col'
|
||||
)}>
|
||||
<Skeleton circle width={20} height={20} />
|
||||
<Skeleton width={hasSubMenu ? 40 : 100} height={16} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={clx(
|
||||
'flex gap-9',
|
||||
hasSubMenu && 'flex-col items-center'
|
||||
)}>
|
||||
<div className={clx(
|
||||
'flex gap-3 items-center',
|
||||
hasSubMenu && 'flex-col'
|
||||
)}>
|
||||
<Skeleton circle width={20} height={20} />
|
||||
<Skeleton width={hasSubMenu ? 40 : 100} height={16} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
{checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
|
||||
<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>
|
||||
{checkPermission(PermissionEnum.MANAGE_REPORTS) && (
|
||||
<SideBarItem
|
||||
icon={<SmsEdit 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"
|
||||
/>
|
||||
)}
|
||||
</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 === 'products' ?
|
||||
<ProductsSubMenu />
|
||||
: subMenuName === 'orders' ?
|
||||
<OrdersSubMenu />
|
||||
: subMenuName === 'customers' ?
|
||||
<CustomersSubMenu />
|
||||
: subMenuName === 'discounts' ?
|
||||
<DiscountSubMenu />
|
||||
: null
|
||||
}
|
||||
<div className="flex-1 flex flex-col justify-end mt-14">
|
||||
{isLoading ? (
|
||||
<div className="text-xs text-[#8C90A3] px-12 space-y-4">
|
||||
<div className={clx("flex gap-9", hasSubMenu && "flex-col items-center")}>
|
||||
<div className={clx("flex gap-3 items-center", hasSubMenu && "flex-col")}>
|
||||
<Skeleton circle width={20} height={20} />
|
||||
<Skeleton width={hasSubMenu ? 40 : 100} height={16} />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
<div className={clx("flex gap-9", hasSubMenu && "flex-col items-center")}>
|
||||
<div className={clx("flex gap-3 items-center", hasSubMenu && "flex-col")}>
|
||||
<Skeleton circle width={20} height={20} />
|
||||
<Skeleton width={hasSubMenu ? 40 : 100} height={16} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="text-xs text-[#8C90A3]">
|
||||
{checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
|
||||
<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>
|
||||
|
||||
export default SideBar
|
||||
{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 === "products" ? (
|
||||
<ProductsSubMenu />
|
||||
) : subMenuName === "orders" ? (
|
||||
<OrdersSubMenu />
|
||||
) : subMenuName === "customers" ? (
|
||||
<CustomersSubMenu />
|
||||
) : subMenuName === "discounts" ? (
|
||||
<DiscountSubMenu />
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SideBar;
|
||||
|
||||
Reference in New Issue
Block a user