danak/dkala-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove from sidebar pager
deploy to danak / build_and_deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
hamid zarghami
2026-06-18 10:27:11 +03:30
parent 9abb8a06b1
commit 1fa2af4139
1 changed files with 260 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/SideBar.tsx
+133 -181
View File
@@ -1,89 +1,67 @@
import { type FC, useEffect } from 'react' import { usePermissions } from "@/hooks/usePermissions";
import LogoImage from '../assets/images/logo.svg' import { PermissionEnum } from "@/pages/roles/enum/Enum";
import LogoSmall from '../assets/images/logo-small.png' import { Calendar, Card, DocumentText, Element3, Home2, Logout, People, Security, SecurityUser, Setting2, SmsEdit, Star1, TicketDiscount, TruckFast } from "iconsax-react";
import { useTranslation } from 'react-i18next' import { type FC, useEffect } from "react";
import { DocumentText, Home2, Logout, People, Setting2, TicketDiscount, Calendar, Security, Card, SecurityUser, TruckFast, Element3, Star1, NotificationBing, SmsEdit } from 'iconsax-react' import { useTranslation } from "react-i18next";
import SideBarItem from './SideBarItem' import Skeleton from "react-loading-skeleton";
import { useLocation } from 'react-router-dom' import { useLocation } from "react-router-dom";
import { Pages } from '../config/Pages' import LogoSmall from "../assets/images/logo-small.png";
import { useSharedStore } from './store/sharedStore' import LogoImage from "../assets/images/logo.svg";
import { clx } from '../helpers/utils' import { Pages } from "../config/Pages";
import ProductsSubMenu from './components/ProductsSubMenu' import { SideBarItemHasSubMenu } from "../config/SideBarSubMenu";
import OrdersSubMenu from './components/OrdersSubMenu' import { clx } from "../helpers/utils";
import CustomersSubMenu from './components/CustomersSubMenu' import CustomersSubMenu from "./components/CustomersSubMenu";
import DiscountSubMenu from './components/DiscountSubMenu' import DiscountSubMenu from "./components/DiscountSubMenu";
import { SideBarItemHasSubMenu } from '../config/SideBarSubMenu' import OrdersSubMenu from "./components/OrdersSubMenu";
import { usePermissions } from '@/hooks/usePermissions' import ProductsSubMenu from "./components/ProductsSubMenu";
import { PermissionEnum } from '@/pages/roles/enum/Enum' import SideBarItem from "./SideBarItem";
import Skeleton from 'react-loading-skeleton' import { useSharedStore } from "./store/sharedStore";
const SideBar: FC = () => { const SideBar: FC = () => {
const { t } = useTranslation("global");
const { t } = useTranslation('global') const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore();
const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore() const location = useLocation();
const location = useLocation() const { checkPermission, isLoading } = usePermissions();
const { checkPermission, isLoading } = usePermissions()
const isActive = (name: string) => { const isActive = (name: string) => {
return location.pathname.includes(name) return location.pathname.includes(name);
} };
useEffect(() => { useEffect(() => {
const split = location.pathname.split('/') const split = location.pathname.split("/");
if (SideBarItemHasSubMenu.includes(split[1])) { if (SideBarItemHasSubMenu.includes(split[1])) {
setSubMenuName(split[1]) setSubMenuName(split[1]);
setSubtMenu(true) setSubtMenu(true);
} else { } else {
setSubMenuName('') setSubMenuName("");
setSubtMenu(false) setSubtMenu(false);
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [location.pathname]) }, [location.pathname]);
const iconSizeSideBar = 20
const iconSizeSideBar = 20;
return ( return (
<> <>
{ {openSidebar && <div className="fixed top-0 left-0 right-0 bottom-0 bg-black/50 z-10" onClick={() => setOpenSidebar(false)} />}
openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black/50 z-10' onClick={() => setOpenSidebar(false)} />
}
<div <div
className={clx( 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', "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', openSidebar && "opacity-100 visible -translate-x-[0px] block z-40",
hasSubMenu && 'w-24 !rounded-tl-none !rounded-bl-none' hasSubMenu && "w-24 !rounded-tl-none !rounded-bl-none",
)} )}
> >
<div className='flex justify-center'> <div className="flex justify-center">{!hasSubMenu ? <img src={LogoImage} className="w-[140px]" /> : <img src={LogoSmall} className="w-7" />}</div>
{
!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="flex-1 flex flex-col h-full overflow-y-auto no-scrollbar">
<div className={clx( <div className={clx("mt-10 px-12 text-header text-sm font-normal", hasSubMenu && "px-2 text-center")}>{t("sidebar.menu")}</div>
'mt-10 px-12 text-header text-sm font-normal',
hasSubMenu && 'px-2 text-center'
)}>
{t('sidebar.menu')}
</div>
{isLoading ? ( {isLoading ? (
<div className='text-xs text-[#8C90A3] mt-4 px-12 space-y-4'> <div className="text-xs text-[#8C90A3] mt-4 px-12 space-y-4">
{Array.from({ length: 8 }).map((_, index) => ( {Array.from({ length: 8 }).map((_, index) => (
<div key={index} className={clx( <div key={index} className={clx("flex gap-9", hasSubMenu && "flex-col items-center")}>
'flex gap-9', <div className={clx("flex gap-3 items-center", hasSubMenu && "flex-col")}>
hasSubMenu && 'flex-col items-center'
)}>
<div className={clx(
'flex gap-3 items-center',
hasSubMenu && 'flex-col'
)}>
<Skeleton circle width={20} height={20} /> <Skeleton circle width={20} height={20} />
<Skeleton width={hasSubMenu ? 40 : 100} height={16} /> <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
</div> </div>
@@ -91,83 +69,83 @@ const SideBar: FC = () => {
))} ))}
</div> </div>
) : ( ) : (
<div className='text-xs text-[#8C90A3]'> <div className="text-xs text-[#8C90A3]">
{checkPermission(PermissionEnum.MANAGE_REPORTS) && ( {checkPermission(PermissionEnum.MANAGE_REPORTS) && (
<SideBarItem <SideBarItem
icon={<Home2 variant={isActive('dashboard') ? 'Bold' : 'Outline'} color={isActive('dashboard') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} icon={<Home2 variant={isActive("dashboard") ? "Bold" : "Outline"} color={isActive("dashboard") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
title={t('sidebar.mainpage')} title={t("sidebar.mainpage")}
isActive={isActive('dashboard')} isActive={isActive("dashboard")}
link={Pages.dashboard} link={Pages.dashboard}
activeName='' activeName=""
/> />
)} )}
{checkPermission(PermissionEnum.MANAGE_ORDERS) && ( {checkPermission(PermissionEnum.MANAGE_ORDERS) && (
<SideBarItem <SideBarItem
icon={<DocumentText variant={isActive('orders') ? 'Bold' : 'Outline'} color={isActive('orders') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} icon={<DocumentText variant={isActive("orders") ? "Bold" : "Outline"} color={isActive("orders") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
title={t('sidebar.orders')} title={t("sidebar.orders")}
isActive={isActive('orders')} isActive={isActive("orders")}
link={Pages.orders.list} link={Pages.orders.list}
name='orders' name="orders"
activeName='orders' activeName="orders"
/> />
)} )}
{checkPermission(PermissionEnum.MANAGE_FOODS) && ( {checkPermission(PermissionEnum.MANAGE_FOODS) && (
<SideBarItem <SideBarItem
icon={<Element3 variant={isActive('products') ? 'Bold' : 'Outline'} color={isActive('products') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} icon={<Element3 variant={isActive("products") ? "Bold" : "Outline"} color={isActive("products") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
title={t('sidebar.foods')} title={t("sidebar.foods")}
isActive={isActive('products')} isActive={isActive("products")}
link={Pages.products.list} link={Pages.products.list}
activeName='products' activeName="products"
/> />
)} )}
{checkPermission(PermissionEnum.MANAGE_SCHEDULES) && ( {checkPermission(PermissionEnum.MANAGE_SCHEDULES) && (
<SideBarItem <SideBarItem
icon={<Calendar variant={isActive('schedule') ? 'Bold' : 'Outline'} color={isActive('schedule') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} icon={<Calendar variant={isActive("schedule") ? "Bold" : "Outline"} color={isActive("schedule") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
title={t('sidebar.schedule')} title={t("sidebar.schedule")}
isActive={isActive('schedule')} isActive={isActive("schedule")}
link={Pages.schedule.list} link={Pages.schedule.list}
name='schedule' name="schedule"
activeName='schedule' activeName="schedule"
/> />
)} )}
{checkPermission(PermissionEnum.MANAGE_PAYMENTS) && ( {checkPermission(PermissionEnum.MANAGE_PAYMENTS) && (
<SideBarItem <SideBarItem
icon={<Card variant={isActive('payment_methods') ? 'Bold' : 'Outline'} color={isActive('payment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} icon={<Card variant={isActive("payment_methods") ? "Bold" : "Outline"} color={isActive("payment_methods") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
title={t('sidebar.payment_methods')} title={t("sidebar.payment_methods")}
isActive={isActive('payment_methods')} isActive={isActive("payment_methods")}
link={Pages.payment_methods.list} link={Pages.payment_methods.list}
name='payment_methods' name="payment_methods"
activeName='payment_methods' activeName="payment_methods"
/> />
)} )}
{checkPermission(PermissionEnum.MANAGE_USERS) && ( {checkPermission(PermissionEnum.MANAGE_USERS) && (
<SideBarItem <SideBarItem
icon={<People variant={isActive('customers') ? 'Bold' : 'Outline'} color={isActive('customers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} icon={<People variant={isActive("customers") ? "Bold" : "Outline"} color={isActive("customers") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
title={t('sidebar.customers')} title={t("sidebar.customers")}
isActive={isActive('customers')} isActive={isActive("customers")}
link={Pages.customers.list} link={Pages.customers.list}
name='customers' name="customers"
activeName='customers' activeName="customers"
/> />
)} )}
{checkPermission(PermissionEnum.MANAGE_REVIEWS) && ( {checkPermission(PermissionEnum.MANAGE_REVIEWS) && (
<SideBarItem <SideBarItem
icon={<Star1 variant={isActive('reviews') ? 'Bold' : 'Outline'} color={isActive('reviews') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} icon={<Star1 variant={isActive("reviews") ? "Bold" : "Outline"} color={isActive("reviews") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
title={t('sidebar.reviews')} title={t("sidebar.reviews")}
isActive={isActive('reviews')} isActive={isActive("reviews")}
link={Pages.reviews.list} link={Pages.reviews.list}
name='reviews' name="reviews"
activeName='reviews' activeName="reviews"
/> />
)} )}
{checkPermission(PermissionEnum.MANAGE_PAGER) && ( {/* {checkPermission(PermissionEnum.MANAGE_PAGER) && (
<SideBarItem <SideBarItem
icon={<NotificationBing variant={isActive('pagers') ? 'Bold' : 'Outline'} color={isActive('pagers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} icon={<NotificationBing variant={isActive('pagers') ? 'Bold' : 'Outline'} color={isActive('pagers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
title={t('sidebar.pagers')} title={t('sidebar.pagers')}
@@ -176,49 +154,49 @@ const SideBar: FC = () => {
name='pagers' name='pagers'
activeName='pagers' activeName='pagers'
/> />
)} )} */}
{checkPermission(PermissionEnum.MANAGE_ADMINS) && ( {checkPermission(PermissionEnum.MANAGE_ADMINS) && (
<SideBarItem <SideBarItem
icon={<SecurityUser variant={isActive('admins') ? 'Bold' : 'Outline'} color={isActive('admins') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} icon={<SecurityUser variant={isActive("admins") ? "Bold" : "Outline"} color={isActive("admins") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
title={t('sidebar.admins')} title={t("sidebar.admins")}
isActive={isActive('admins')} isActive={isActive("admins")}
link={Pages.admins.list} link={Pages.admins.list}
name='admins' name="admins"
activeName='admins' activeName="admins"
/> />
)} )}
{checkPermission(PermissionEnum.MANAGE_DELIVERY) && ( {checkPermission(PermissionEnum.MANAGE_DELIVERY) && (
<SideBarItem <SideBarItem
icon={<TruckFast variant={isActive('shipment_methods') ? 'Bold' : 'Outline'} color={isActive('shipment_methods') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} icon={<TruckFast variant={isActive("shipment_methods") ? "Bold" : "Outline"} color={isActive("shipment_methods") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
title={t('sidebar.shipment_methods')} title={t("sidebar.shipment_methods")}
isActive={isActive('shipment_methods')} isActive={isActive("shipment_methods")}
link={Pages.shipment_methods.list} link={Pages.shipment_methods.list}
name='shipment_methods' name="shipment_methods"
activeName='shipment_methods' activeName="shipment_methods"
/> />
)} )}
{checkPermission(PermissionEnum.MANAGE_COUPONS) && ( {checkPermission(PermissionEnum.MANAGE_COUPONS) && (
<SideBarItem <SideBarItem
icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} icon={<TicketDiscount variant={isActive("discounts") ? "Bold" : "Outline"} color={isActive("discounts") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
title={t('sidebar.discount')} title={t("sidebar.discount")}
isActive={isActive('discounts')} isActive={isActive("discounts")}
link={Pages.coupons.list} link={Pages.coupons.list}
name='discounts' name="discounts"
activeName='discounts' activeName="discounts"
/> />
)} )}
{checkPermission(PermissionEnum.MANAGE_ROLES) && ( {checkPermission(PermissionEnum.MANAGE_ROLES) && (
<SideBarItem <SideBarItem
icon={<Security variant={isActive('roles') ? 'Bold' : 'Outline'} color={isActive('roles') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} icon={<Security variant={isActive("roles") ? "Bold" : "Outline"} color={isActive("roles") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
title={t('sidebar.roles')} title={t("sidebar.roles")}
isActive={isActive('roles')} isActive={isActive("roles")}
link={Pages.roles.list} link={Pages.roles.list}
name='roles' name="roles"
activeName='roles' activeName="roles"
/> />
)} )}
@@ -237,30 +215,19 @@ const SideBar: FC = () => {
</div> </div>
)} )}
<div className={clx( <div className={clx("mt-10 px-12 text-header text-sm font-normal", hasSubMenu && "px-2 text-center")}>{t("sidebar.other")}</div>
'mt-10 px-12 text-header text-sm font-normal',
hasSubMenu && 'px-2 text-center'
)}>
{t('sidebar.other')}
</div>
{isLoading ? ( {isLoading ? (
<div className='text-xs text-[#8C90A3] mt-4 px-12 space-y-4'> <div className="text-xs text-[#8C90A3] mt-4 px-12 space-y-4">
<div className={clx( <div className={clx("flex gap-9", hasSubMenu && "flex-col items-center")}>
'flex gap-9', <div className={clx("flex gap-3 items-center", hasSubMenu && "flex-col")}>
hasSubMenu && 'flex-col items-center'
)}>
<div className={clx(
'flex gap-3 items-center',
hasSubMenu && 'flex-col'
)}>
<Skeleton circle width={20} height={20} /> <Skeleton circle width={20} height={20} />
<Skeleton width={hasSubMenu ? 40 : 100} height={16} /> <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
</div> </div>
</div> </div>
</div> </div>
) : ( ) : (
<div className='text-xs text-[#8C90A3]'> <div className="text-xs text-[#8C90A3]">
{/* {checkPermission(PermissionEnum.VIEW_REPORTS) && ( {/* {checkPermission(PermissionEnum.VIEW_REPORTS) && (
<SideBarItem <SideBarItem
icon={<Chart1 variant={isActive('statistics') ? 'Bold' : 'Outline'} color={isActive('statistics') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} icon={<Chart1 variant={isActive('statistics') ? 'Bold' : 'Outline'} color={isActive('statistics') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
@@ -282,39 +249,27 @@ const SideBar: FC = () => {
{checkPermission(PermissionEnum.MANAGE_REPORTS) && ( {checkPermission(PermissionEnum.MANAGE_REPORTS) && (
<SideBarItem <SideBarItem
icon={<SmsEdit variant={isActive('reports') ? 'Bold' : 'Outline'} color={isActive('reports') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} icon={<SmsEdit variant={isActive("reports") ? "Bold" : "Outline"} color={isActive("reports") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
title={t('sidebar.reports')} title={t("sidebar.reports")}
isActive={isActive('reports')} isActive={isActive("reports")}
link={Pages.reports.list} link={Pages.reports.list}
activeName='reports' activeName="reports"
/> />
)} )}
</div> </div>
)} )}
<div className='flex-1 flex flex-col justify-end mt-14'> <div className="flex-1 flex flex-col justify-end mt-14">
{isLoading ? ( {isLoading ? (
<div className='text-xs text-[#8C90A3] px-12 space-y-4'> <div className="text-xs text-[#8C90A3] px-12 space-y-4">
<div className={clx( <div className={clx("flex gap-9", hasSubMenu && "flex-col items-center")}>
'flex gap-9', <div className={clx("flex gap-3 items-center", hasSubMenu && "flex-col")}>
hasSubMenu && 'flex-col items-center'
)}>
<div className={clx(
'flex gap-3 items-center',
hasSubMenu && 'flex-col'
)}>
<Skeleton circle width={20} height={20} /> <Skeleton circle width={20} height={20} />
<Skeleton width={hasSubMenu ? 40 : 100} height={16} /> <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
</div> </div>
</div> </div>
<div className={clx( <div className={clx("flex gap-9", hasSubMenu && "flex-col items-center")}>
'flex gap-9', <div className={clx("flex gap-3 items-center", hasSubMenu && "flex-col")}>
hasSubMenu && 'flex-col items-center'
)}>
<div className={clx(
'flex gap-3 items-center',
hasSubMenu && 'flex-col'
)}>
<Skeleton circle width={20} height={20} /> <Skeleton circle width={20} height={20} />
<Skeleton width={hasSubMenu ? 40 : 100} height={16} /> <Skeleton width={hasSubMenu ? 40 : 100} height={16} />
</div> </div>
@@ -322,25 +277,25 @@ const SideBar: FC = () => {
</div> </div>
) : ( ) : (
<> <>
<div className='text-xs text-[#8C90A3]'> <div className="text-xs text-[#8C90A3]">
{checkPermission(PermissionEnum.MANAGE_SETTINGS) && ( {checkPermission(PermissionEnum.MANAGE_SETTINGS) && (
<SideBarItem <SideBarItem
icon={<Setting2 variant={isActive('setting') ? 'Bold' : 'Outline'} color={isActive('setting') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} icon={<Setting2 variant={isActive("setting") ? "Bold" : "Outline"} color={isActive("setting") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
title={t('sidebar.setting')} title={t("sidebar.setting")}
isActive={isActive('setting')} isActive={isActive("setting")}
link={Pages.setting} link={Pages.setting}
activeName='settings' activeName="settings"
/> />
)} )}
</div> </div>
<div className='text-xs text-[#8C90A3]'> <div className="text-xs text-[#8C90A3]">
<SideBarItem <SideBarItem
icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />} icon={<Logout variant={isActive("logout") ? "Bold" : "Outline"} color={isActive("logout") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
title={t('sidebar.logout')} title={t("sidebar.logout")}
isActive={isActive('logout')} isActive={isActive("logout")}
link={`#`} link={`#`}
isLogout isLogout
activeName='' activeName=""
/> />
</div> </div>
</> </>
@@ -349,24 +304,21 @@ const SideBar: FC = () => {
</div> </div>
</div> </div>
{ {hasSubMenu && (openSidebar || window.innerWidth > 1139) && (
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">
<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" ? (
{
subMenuName === 'products' ?
<ProductsSubMenu /> <ProductsSubMenu />
: subMenuName === 'orders' ? ) : subMenuName === "orders" ? (
<OrdersSubMenu /> <OrdersSubMenu />
: subMenuName === 'customers' ? ) : subMenuName === "customers" ? (
<CustomersSubMenu /> <CustomersSubMenu />
: subMenuName === 'discounts' ? ) : subMenuName === "discounts" ? (
<DiscountSubMenu /> <DiscountSubMenu />
: null ) : null}
}
</div> </div>
} )}
</> </>
) );
} };
export default SideBar export default SideBar;