diff --git a/src/shared/SideBar.tsx b/src/shared/SideBar.tsx
index 5ed7d14..3fa0fc7 100644
--- a/src/shared/SideBar.tsx
+++ b/src/shared/SideBar.tsx
@@ -1,714 +1,1077 @@
-import { FC, useEffect, useState } from 'react'
-import LogoImage from '../assets/images/logo.svg'
-import LogoSmall from '../assets/images/logo-small.svg'
-import { useTranslation } from 'react-i18next'
-import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Gallery, Headphone, Home2, Logout, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare, Activity, Icon, Category, Warning2, Building, Sms, Chart21, ArrowDown2, Global, UserTick, Money } 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 ServicesSubMenu from './components/ServicesSubMenu'
-import { SideBarItemHasSubMenu } from '../config/SideBarSubMenu'
-import ReceiptSubMenu from './components/ReceiptSubMenu'
-import CustomerSubMenu from './components/CustomerSubMenu'
-import TicketSubMenu from './components/TicketSubMenu'
-import UsersSubMenu from './components/UsersSubMenu'
-import LearningSubMenu from './components/LearningSubMenu'
-import BlogSubMenu from './components/BlogSubMenu'
-import { useGetProfile } from '../pages/profile/hooks/useProfileData'
-import SupportSubMenu from './components/SupportSubMenu'
-import AccessLogsSubMenu from './components/AccessLogsSubMenu'
-import { useGetAdminPermissions } from '../pages/users/hooks/useUserData'
+import {
+  Activity,
+  ArrowDown2,
+  BagTick,
+  Building,
+  Card,
+  Category,
+  Chart21,
+  Code,
+  CodeCircle,
+  DocumentLike,
+  DocumentText,
+  Element3,
+  Gallery,
+  Global,
+  Headphone,
+  Home2,
+  Icon,
+  Logout,
+  Messages3,
+  Money,
+  Money3,
+  NotificationStatus,
+  People,
+  Profile,
+  Receipt21,
+  Setting2,
+  Sms,
+  SmsTracking,
+  Teacher,
+  TicketDiscount,
+  UserSquare,
+  UserTick,
+  Warning2,
+} from "iconsax-react";
+import { FC, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
+import LogoSmall from "../assets/images/logo-small.svg";
+import LogoImage from "../assets/images/logo.svg";
+import { Pages } from "../config/Pages";
+import { SideBarItemHasSubMenu } from "../config/SideBarSubMenu";
+import { clx } from "../helpers/utils";
+import { useGetProfile } from "../pages/profile/hooks/useProfileData";
+import { useGetAdminPermissions } from "../pages/users/hooks/useUserData";
+import AccessLogsSubMenu from "./components/AccessLogsSubMenu";
+import BlogSubMenu from "./components/BlogSubMenu";
+import CustomerSubMenu from "./components/CustomerSubMenu";
+import LearningSubMenu from "./components/LearningSubMenu";
+import ReceiptSubMenu from "./components/ReceiptSubMenu";
+import ServicesSubMenu from "./components/ServicesSubMenu";
+import SupportSubMenu from "./components/SupportSubMenu";
+import TicketSubMenu from "./components/TicketSubMenu";
+import UsersSubMenu from "./components/UsersSubMenu";
+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 { data: profile } = useGetProfile();
+  const { data: adminPermissions } = useGetAdminPermissions();
+  const isActive = (name: string) => {
+    return location.pathname.includes(name);
+  };
 
-    const { t } = useTranslation('global')
-    const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
-    const location = useLocation()
-    const { data: profile } = useGetProfile()
-    const { data: adminPermissions } = useGetAdminPermissions()
-    const isActive = (name: string) => {
-        return location.pathname.includes(name)
+  const [openMenu, setOpenMenu] = useState<string[]>(["menu"]);
+
+  useEffect(() => {
+    const split = location.pathname.split("/");
+
+    if (SideBarItemHasSubMenu.includes(split[1])) {
+      setSubMenuName(split[1]);
+      setSubtMenu(true);
+    } else {
+      setSubMenuName("");
+      setSubtMenu(false);
     }
 
-    const [openMenu, setOpenMenu] = useState<string[]>(['menu'])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname]);
 
-    useEffect(() => {
+  const iconSizeSideBar = 20;
 
-        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
-
-    const handleOpenMenu = (name: string) => {
-        const opens = [...openMenu]
-        const index = opens.findIndex(o => o === name)
-        if (index > -1) {
-            opens.splice(index, 1)
-        } else {
-            opens.push(name)
-        }
-        setOpenMenu(opens)
+  const handleOpenMenu = (name: string) => {
+    const opens = [...openMenu];
+    const index = opens.findIndex((o) => o === name);
+    if (index > -1) {
+      opens.splice(index, 1);
+    } else {
+      opens.push(name);
     }
+    setOpenMenu(opens);
+  };
 
+  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-[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
+            onClick={() => handleOpenMenu("menu")}
+            className={clx(
+              "mt-10 px-12 text-header text-sm font-normal cursor-pointer",
+              hasSubMenu && "px-2 text-center",
+              !hasSubMenu && "flex gap-2 items-center",
+            )}
+          >
+            {t("sidebar.menu")}
 
-    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-[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'
-                )}
+              className={clx(
+                "transition-all",
+                !openMenu.includes("menu") && "rotate-180",
+                hasSubMenu && "hidden",
+              )}
             >
-                <div className='flex justify-center'>
-                    {
-                        !hasSubMenu ?
-                            <img src={LogoImage} className='w-[140px]' />
-                            :
-                            <img src={LogoSmall} className='w-7' />
+              <ArrowDown2 size={18} color="#c3c7dd" />
+            </div>
+          </div>
+
+          <div
+            className={clx(
+              "text-xs text-[#8C90A3]",
+              !openMenu.includes("menu") && "hidden",
+            )}
+          >
+            <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("services") ? "Bold" : "Outline"}
+                  color={isActive("services") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.services")}
+              isActive={isActive("services")}
+              link={Pages.services.list}
+              name="services"
+              activeName="services"
+            />
+
+            <SideBarItem
+              icon={
+                <Headphone
+                  variant={isActive("support") ? "Bold" : "Outline"}
+                  color={isActive("support") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.support")}
+              isActive={isActive("support")}
+              link={Pages.support.list}
+              activeName="support_plan"
+            />
+
+            <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}
+              activeName="customers"
+            />
+            <SideBarItem
+              icon={
+                <UserSquare
+                  variant={isActive("representatives") ? "Bold" : "Outline"}
+                  color={isActive("representatives") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.representatives")}
+              isActive={isActive("representatives")}
+              link={Pages.representative.list}
+              activeName="agents"
+            />
+            <SideBarItem
+              icon={
+                <CodeCircle
+                  variant={isActive("developers") ? "Bold" : "Outline"}
+                  color={isActive("developers") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.developers")}
+              isActive={isActive("developers")}
+              link={Pages.developers.list}
+              activeName="developers"
+            />
+
+            <SideBarItem
+              icon={
+                <Money3
+                  variant={isActive("payments") ? "Bold" : "Outline"}
+                  color={isActive("payments") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.payments")}
+              isActive={isActive("payments")}
+              link={Pages.payment.list}
+              activeName="payments"
+            />
+
+            <SideBarItem
+              icon={
+                <Code
+                  variant={isActive("referral-code") ? "Bold" : "Outline"}
+                  color={isActive("referral-code") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.code_referral")}
+              isActive={isActive("referral-code")}
+              link={Pages.referralCode.list}
+              activeName="referralCode"
+            />
+            <SideBarItem
+              icon={
+                <Profile
+                  variant={isActive("users") ? "Bold" : "Outline"}
+                  color={isActive("users") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.users")}
+              isActive={isActive("users")}
+              link={Pages.users.list}
+              activeName="admins"
+            />
+            <SideBarItem
+              icon={
+                <Gallery
+                  variant={isActive("sliders") ? "Bold" : "Outline"}
+                  color={isActive("sliders") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.sliders")}
+              isActive={isActive("sliders")}
+              link={Pages.sliders.list}
+              activeName="blogs"
+            />
+          </div>
+
+          {
+            <div
+              onClick={() => handleOpenMenu("financial")}
+              className={clx(
+                "mt-10 px-12 text-header text-sm font-normal cursor-pointer",
+                hasSubMenu && "px-2 text-center",
+                !hasSubMenu && "flex gap-2 items-center",
+              )}
+            >
+              {t("sidebar.financial")}
+
+              <div
+                className={clx(
+                  "transition-all",
+                  !openMenu.includes("financial") && "rotate-180",
+                  hasSubMenu && "hidden",
+                )}
+              >
+                <ArrowDown2 size={18} color="#c3c7dd" />
+              </div>
+            </div>
+          }
+          <div
+            className={clx(
+              "text-xs text-[#8C90A3]",
+              !openMenu.includes("financial") && "hidden",
+            )}
+          >
+            <SideBarItem
+              icon={
+                <BagTick
+                  variant={isActive("subscriptions") ? "Bold" : "Outline"}
+                  color={isActive("subscriptions") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.subscriptions")}
+              isActive={isActive("subscriptions")}
+              link={Pages.subscriptions.list}
+              activeName="payments"
+            />
+
+            <SideBarItem
+              icon={
+                <Receipt21
+                  variant={isActive("receipts") ? "Bold" : "Outline"}
+                  color={isActive("receipts") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.receipt_list")}
+              isActive={isActive("receipts")}
+              link={Pages.receipts.index}
+              activeName="invoices"
+            />
+
+            <SideBarItem
+              icon={
+                <Card
+                  variant={isActive("transactions") ? "Bold" : "Outline"}
+                  color={isActive("transactions") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.transactions")}
+              isActive={isActive("transactions")}
+              link={Pages.transactions}
+              activeName="transactions"
+            />
+
+            <SideBarItem
+              icon={
+                <TicketDiscount
+                  variant={isActive("discounts") ? "Bold" : "Outline"}
+                  color={isActive("discounts") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.discounts")}
+              isActive={isActive("discounts")}
+              link={Pages.discount.list}
+              activeName="discounts"
+            />
+
+            <SideBarItem
+              icon={
+                <Card
+                  variant={isActive("card") ? "Bold" : "Outline"}
+                  color={isActive("card") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.card")}
+              isActive={isActive("card")}
+              link={Pages.cardBank.list}
+              activeName="bank_accounts"
+            />
+          </div>
+
+          {profile?.data?.user?.roles.some(
+            (role: { name: string }) => role.name === "super_admin",
+          ) && (
+            <div
+              onClick={() => handleOpenMenu("other")}
+              className={clx(
+                "mt-10 px-12 text-header text-sm font-normal cursor-pointer",
+                hasSubMenu && "px-2 text-center",
+                !hasSubMenu && "flex gap-2 items-center",
+              )}
+            >
+              {t("sidebar.other")}
+
+              <div
+                className={clx(
+                  "transition-all",
+                  !openMenu.includes("other") && "rotate-180",
+                  hasSubMenu && "hidden",
+                )}
+              >
+                <ArrowDown2 size={18} color="#c3c7dd" />
+              </div>
+            </div>
+          )}
+
+          <div
+            className={clx(
+              "text-xs text-[#8C90A3]",
+              !openMenu.includes("other") && "hidden",
+            )}
+          >
+            <SideBarItem
+              icon={
+                <Messages3
+                  variant={isActive("tickets") ? "Bold" : "Outline"}
+                  color={isActive("tickets") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.ticket")}
+              isActive={isActive("tickets")}
+              link={Pages.ticket.list}
+              activeName="tickets"
+            />
+
+            <SideBarItem
+              icon={
+                <Chart21
+                  variant={isActive("feedback") ? "Bold" : "Outline"}
+                  color={isActive("feedback") ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("sidebar.feedback")}
+              isActive={isActive("feedback")}
+              link={Pages.feedback.list}
+              activeName="services"
+            />
+
+            <div className="text-xs text-[#8C90A3]">
+              <SideBarItem
+                icon={
+                  <Activity
+                    variant={isActive("access-logs") ? "Bold" : "Outline"}
+                    color={isActive("access-logs") ? "black" : "#8C90A3"}
+                    size={iconSizeSideBar}
+                  />
+                }
+                title={t("sidebar.accessLogs")}
+                isActive={isActive("access-logs")}
+                link={Pages.accessLogs.list}
+                name="accessLogs"
+                activeName="logs"
+              />
+            </div>
+
+            <div className="text-xs text-[#8C90A3]">
+              <SideBarItem
+                icon={
+                  <DocumentText
+                    variant={isActive("criticisms") ? "Bold" : "Outline"}
+                    color={isActive("criticisms") ? "black" : "#8C90A3"}
+                    size={iconSizeSideBar}
+                  />
+                }
+                title={t("sidebar.criticisms")}
+                isActive={isActive("criticisms")}
+                link={Pages.criticisms.list}
+                activeName="criticisms"
+              />
+            </div>
+          </div>
+          {profile?.data?.user?.roles?.some(
+            (role: { name: string }) => role.name === "super_admin",
+          ) && (
+            <div
+              onClick={() => handleOpenMenu("content")}
+              className={clx(
+                "mt-10 px-12 text-header text-sm font-normal cursor-pointer",
+                hasSubMenu && "px-2 text-center text-xs",
+                !hasSubMenu && "flex gap-2 items-center",
+              )}
+            >
+              {t("sidebar.mnage_content")}
+
+              <div
+                className={clx(
+                  "transition-all",
+                  !openMenu.includes("content") && "rotate-180",
+                  hasSubMenu && "hidden",
+                )}
+              >
+                <ArrowDown2 size={18} color="#c3c7dd" />
+              </div>
+            </div>
+          )}
+
+          {adminPermissions?.data?.permissions?.some(
+            (permission: { name: string }) => permission.name === "reseller",
+          ) && (
+            <>
+              <div
+                onClick={() => handleOpenMenu("reseller")}
+                className={clx(
+                  "mt-10 px-12 text-header text-sm font-normal cursor-pointer",
+                  hasSubMenu && "px-2 text-center",
+                  !hasSubMenu && "flex gap-2 items-center",
+                )}
+              >
+                {t("sidebar.reseller")}
+
+                <div
+                  className={clx(
+                    "transition-all",
+                    !openMenu.includes("reseller") && "rotate-180",
+                    hasSubMenu && "hidden",
+                  )}
+                >
+                  <ArrowDown2 size={18} color="#c3c7dd" />
+                </div>
+              </div>
+              <div
+                className={clx(
+                  "flex-1 flex flex-col justify-end",
+                  !openMenu.includes("reseller") && "hidden",
+                )}
+              >
+                <div className="text-xs text-[#8C90A3]">
+                  <SideBarItem
+                    icon={
+                      <UserTick
+                        variant={isActive("reseller/list") ? "Bold" : "Outline"}
+                        color={isActive("reseller/list") ? "black" : "#8C90A3"}
+                        size={iconSizeSideBar}
+                      />
                     }
+                    title={t("sidebar.resellers")}
+                    isActive={isActive("reseller/list")}
+                    link={Pages.reseller.list}
+                    activeName="reseller"
+                  />
                 </div>
 
-                <div className='flex-1 flex flex-col h-full overflow-y-auto no-scrollbar'>
-                    <div onClick={() => handleOpenMenu('menu')} className={clx(
-                        'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
-                        hasSubMenu && 'px-2 text-center',
-                        !hasSubMenu && 'flex gap-2 items-center'
-                    )}>
-                        {t('sidebar.menu')}
-
-                        <div className={clx(
-                            'transition-all',
-                            !openMenu.includes('menu') && 'rotate-180',
-                            hasSubMenu && 'hidden'
-                        )}>
-                            <ArrowDown2 size={18} color='#c3c7dd' />
-                        </div>
-                    </div>
-
-                    <div className={clx(
-                        'text-xs text-[#8C90A3]',
-                        !openMenu.includes('menu') && 'hidden'
-                    )}>
-                        <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('services') ? 'Bold' : 'Outline'} color={isActive('services') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.services')}
-                            isActive={isActive('services')}
-                            link={Pages.services.list}
-                            name='services'
-                            activeName='services'
-                        />
-
-                        <SideBarItem
-                            icon={<Headphone variant={isActive('support') ? 'Bold' : 'Outline'} color={isActive('support') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.support')}
-                            isActive={isActive('support')}
-                            link={Pages.support.list}
-                            activeName='support_plan'
-                        />
-
-                        <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}
-                            activeName='customers'
-                        />
-                        <SideBarItem
-                            icon={<UserSquare variant={isActive('representatives') ? 'Bold' : 'Outline'} color={isActive('representatives') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.representatives')}
-                            isActive={isActive('representatives')}
-                            link={Pages.representative.list}
-                            activeName='agents'
-                        />
-                        <SideBarItem
-                            icon={<CodeCircle variant={isActive('developers') ? 'Bold' : 'Outline'} color={isActive('developers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.developers')}
-                            isActive={isActive('developers')}
-                            link={Pages.developers.list}
-                            activeName='developers'
-                        />
-
-
-
-
-                        <SideBarItem
-                            icon={<Money3 variant={isActive('payments') ? 'Bold' : 'Outline'} color={isActive('payments') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.payments')}
-                            isActive={isActive('payments')}
-                            link={Pages.payment.list}
-                            activeName='payments'
-                        />
-
-                        <SideBarItem
-                            icon={<Code variant={isActive('referral-code') ? 'Bold' : 'Outline'} color={isActive('referral-code') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.code_referral')}
-                            isActive={isActive('referral-code')}
-                            link={Pages.referralCode.list}
-                            activeName='referralCode'
-                        />
-                        <SideBarItem
-                            icon={<Profile variant={isActive('users') ? 'Bold' : 'Outline'} color={isActive('users') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.users')}
-                            isActive={isActive('users')}
-                            link={Pages.users.list}
-                            activeName='admins'
-                        />
-                        <SideBarItem
-                            icon={<Gallery variant={isActive('sliders') ? 'Bold' : 'Outline'} color={isActive('sliders') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.sliders')}
-                            isActive={isActive('sliders')}
-                            link={Pages.sliders.list}
-                            activeName='blogs'
-                        />
-
-                    </div>
-
-                    {
-                        <div onClick={() => handleOpenMenu('financial')} className={clx(
-                            'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
-                            hasSubMenu && 'px-2 text-center',
-                            !hasSubMenu && 'flex gap-2 items-center'
-                        )}>
-                            {t('sidebar.financial')}
-
-                            <div className={clx(
-                                'transition-all',
-                                !openMenu.includes('financial') && 'rotate-180',
-                                hasSubMenu && 'hidden'
-                            )}>
-                                <ArrowDown2 size={18} color='#c3c7dd' />
-                            </div>
-                        </div>
+                <div className="text-xs text-[#8C90A3]">
+                  <SideBarItem
+                    icon={
+                      <Money
+                        variant={
+                          isActive("reseller/withdraw") ? "Bold" : "Outline"
+                        }
+                        color={
+                          isActive("reseller/withdraw") ? "black" : "#8C90A3"
+                        }
+                        size={iconSizeSideBar}
+                      />
                     }
-                    <div className={clx(
-                        'text-xs text-[#8C90A3]',
-                        !openMenu.includes('financial') && 'hidden'
-                    )}>
-
-                        <SideBarItem
-                            icon={<Receipt21 variant={isActive('receipts') ? 'Bold' : 'Outline'} color={isActive('receipts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.receipt_list')}
-                            isActive={isActive('receipts')}
-                            link={Pages.receipts.index}
-                            activeName='invoices'
-                        />
-
-                        <SideBarItem
-                            icon={<Card variant={isActive('transactions') ? 'Bold' : 'Outline'} color={isActive('transactions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.transactions')}
-                            isActive={isActive('transactions')}
-                            link={Pages.transactions}
-                            activeName='transactions'
-                        />
-
-                        <SideBarItem
-                            icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.discounts')}
-                            isActive={isActive('discounts')}
-                            link={Pages.discount.list}
-                            activeName='discounts'
-                        />
-
-                        <SideBarItem
-                            icon={<Card variant={isActive('card') ? 'Bold' : 'Outline'} color={isActive('card') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.card')}
-                            isActive={isActive('card')}
-                            link={Pages.cardBank.list}
-                            activeName='bank_accounts'
-                        />
-                    </div>
-
-                    {
-                        profile?.data?.user?.roles.some((role: { name: string }) => role.name === 'super_admin') &&
-                        <div onClick={() => handleOpenMenu('other')} className={clx(
-                            'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
-                            hasSubMenu && 'px-2 text-center',
-                            !hasSubMenu && 'flex gap-2 items-center'
-                        )}>
-                            {t('sidebar.other')}
-
-                            <div className={clx(
-                                'transition-all',
-                                !openMenu.includes('other') && 'rotate-180',
-                                hasSubMenu && 'hidden'
-                            )}>
-                                <ArrowDown2 size={18} color='#c3c7dd' />
-                            </div>
-                        </div>
-                    }
-
-
-
-
-                    <div className={clx(
-                        'text-xs text-[#8C90A3]',
-                        !openMenu.includes('other') && 'hidden'
-                    )}>
-                        <SideBarItem
-                            icon={<Messages3 variant={isActive('tickets') ? 'Bold' : 'Outline'} color={isActive('tickets') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.ticket')}
-                            isActive={isActive('tickets')}
-                            link={Pages.ticket.list}
-                            activeName='tickets'
-                        />
-
-                        <SideBarItem
-                            icon={<Chart21 variant={isActive('feedback') ? 'Bold' : 'Outline'} color={isActive('feedback') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.feedback')}
-                            isActive={isActive('feedback')}
-                            link={Pages.feedback.list}
-                            activeName='services'
-                        />
-
-
-                        <div className='text-xs text-[#8C90A3]'>
-                            <SideBarItem
-                                icon={<Activity variant={isActive('access-logs') ? 'Bold' : 'Outline'} color={isActive('access-logs') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.accessLogs')}
-                                isActive={isActive('access-logs')}
-                                link={Pages.accessLogs.list}
-                                name='accessLogs'
-                                activeName='logs'
-                            />
-                        </div>
-
-                        <div className='text-xs text-[#8C90A3]'>
-                            <SideBarItem
-                                icon={<DocumentText variant={isActive('criticisms') ? 'Bold' : 'Outline'} color={isActive('criticisms') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.criticisms')}
-                                isActive={isActive('criticisms')}
-                                link={Pages.criticisms.list}
-                                activeName='criticisms'
-                            />
-                        </div>
-                    </div>
-                    {
-                        profile?.data?.user?.roles?.some((role: { name: string }) => role.name === 'super_admin') &&
-                        <div onClick={() => handleOpenMenu('content')} className={clx(
-                            'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
-                            hasSubMenu && 'px-2 text-center text-xs',
-                            !hasSubMenu && 'flex gap-2 items-center'
-                        )}>
-                            {t('sidebar.mnage_content')}
-
-                            <div className={clx(
-                                'transition-all',
-                                !openMenu.includes('content') && 'rotate-180',
-                                hasSubMenu && 'hidden'
-                            )}>
-                                <ArrowDown2 size={18} color='#c3c7dd' />
-                            </div>
-                        </div>
-                    }
-
-                    {
-                        adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'reseller') &&
-                        <>
-                            <div onClick={() => handleOpenMenu('reseller')} className={clx(
-                                'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
-                                hasSubMenu && 'px-2 text-center',
-                                !hasSubMenu && 'flex gap-2 items-center'
-                            )}>
-                                {t('sidebar.reseller')}
-
-                                <div className={clx(
-                                    'transition-all',
-                                    !openMenu.includes('reseller') && 'rotate-180',
-                                    hasSubMenu && 'hidden'
-                                )}>
-                                    <ArrowDown2 size={18} color='#c3c7dd' />
-                                </div>
-                            </div>
-                            <div className={clx(
-                                'flex-1 flex flex-col justify-end',
-                                !openMenu.includes('reseller') && 'hidden'
-
-                            )}>
-
-                                <div className='text-xs text-[#8C90A3]'>
-                                    <SideBarItem
-                                        icon={<UserTick variant={isActive('reseller/list') ? 'Bold' : 'Outline'} color={isActive('reseller/list') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                        title={t('sidebar.resellers')}
-                                        isActive={isActive('reseller/list')}
-                                        link={Pages.reseller.list}
-                                        activeName='reseller'
-                                    />
-                                </div>
-
-                                <div className='text-xs text-[#8C90A3]'>
-                                    <SideBarItem
-                                        icon={<Money variant={isActive('reseller/withdraw') ? 'Bold' : 'Outline'} color={isActive('reseller/withdraw') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                        title={t('sidebar.withdraw')}
-                                        isActive={isActive('reseller/withdraw')}
-                                        link={Pages.reseller.withdraw}
-                                        activeName='reseller'
-                                    />
-                                </div>
-                            </div>
-                        </>
-                    }
-
-
-                    <div className={clx(
-                        !openMenu.includes('content') && 'hidden'
-                    )}>
-                        <div className='text-xs text-[#8C90A3]'>
-                            <SideBarItem
-                                icon={<DocumentLike variant={isActive('ads') ? 'Bold' : 'Outline'} color={isActive('ads') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.ads')}
-                                isActive={isActive('ads')}
-                                link={Pages.ads.list}
-                                activeName='advertisements'
-                            />
-                        </div>
-
-                        <div className='text-xs text-[#8C90A3]'>
-                            <SideBarItem
-                                icon={<NotificationStatus variant={isActive('announcement') ? 'Bold' : 'Outline'} color={isActive('announcement') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.announcement')}
-                                isActive={isActive('announcement')}
-                                link={Pages.announcement.list}
-                                activeName='announcements'
-                            />
-                        </div>
-
-                        <div className='text-xs text-[#8C90A3]'>
-                            <SideBarItem
-                                icon={<DocumentText variant={isActive('blog') ? 'Bold' : 'Outline'} color={isActive('blog') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.blog')}
-                                isActive={isActive('blog')}
-                                link={Pages.blog.list}
-                                activeName='blogs'
-                            />
-                        </div>
-
-                        <div className='text-xs text-[#8C90A3]'>
-                            <SideBarItem
-                                icon={<Teacher variant={isActive('learning') ? 'Bold' : 'Outline'} color={isActive('learning') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.learning')}
-                                isActive={isActive('learning')}
-                                link={Pages.learning.list}
-                                activeName='learnings'
-                            />
-                        </div>
-
-                        <div className='text-xs text-[#8C90A3]'>
-                            <SideBarItem
-                                icon={<SmsTracking variant={isActive('messages') ? 'Bold' : 'Outline'} color={isActive('messages') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                title={t('sidebar.messages')}
-                                isActive={isActive('messages')}
-                                link={Pages.messages.list}
-                                activeName='contacts_us'
-                            />
-                        </div>
-                    </div>
-
-                    {
-                        adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'dmenu') &&
-                        <>
-                            <div onClick={() => handleOpenMenu('dmenu')} className={clx(
-                                'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
-                                hasSubMenu && 'px-2 text-center',
-                                !hasSubMenu && 'flex gap-2 items-center'
-                            )}>
-                                {t('sidebar.dmenu')}
-
-                                <div className={clx(
-                                    'transition-all',
-                                    !openMenu.includes('dmenu') && 'rotate-180',
-                                    hasSubMenu && 'hidden'
-                                )}>
-                                    <ArrowDown2 size={18} color='#c3c7dd' />
-                                </div>
-                            </div>
-                            <div className={clx(
-                                'flex-1 flex flex-col justify-end',
-                                !openMenu.includes('dmenu') && 'hidden'
-                            )}>
-
-                                <div className='text-xs text-[#8C90A3]'>
-                                    <SideBarItem
-                                        icon={<Icon variant={isActive('dmenu/icons/list') ? 'Bold' : 'Outline'} color={isActive('dmenu/icons/list') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                        title={t('sidebar.icons')}
-                                        isActive={isActive('dmenu/icons/list')}
-                                        link={Pages.dmenu.icons.list}
-                                        activeName='dmenu'
-                                    />
-                                </div>
-
-                                <div className='text-xs text-[#8C90A3]'>
-                                    <SideBarItem
-                                        icon={<Category variant={isActive('dmenu/icons/group/list') ? 'Bold' : 'Outline'} color={isActive('dmenu/icons/group/list') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                        title={t('sidebar.groups_icon')}
-                                        isActive={isActive('dmenu/icons/group/list')}
-                                        link={Pages.dmenu.icons.groupList}
-                                        activeName='dmenu'
-                                    />
-                                </div>
-
-                                <div className='text-xs text-[#8C90A3]'>
-                                    <SideBarItem
-                                        icon={<Warning2 variant={isActive('dmenu/reports') ? 'Bold' : 'Outline'} color={isActive('dmenu/reports') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                        title={t('sidebar.reports')}
-                                        isActive={isActive('dmenu/reports')}
-                                        link={Pages.dmenu.warnings.list}
-                                        activeName='dmenu'
-                                    />
-                                </div>
-
-                                <div className='text-xs text-[#8C90A3]'>
-                                    <SideBarItem
-                                        icon={<Building variant={isActive('restaurants') ? 'Bold' : 'Outline'} color={isActive('restaurants') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                        title={t('sidebar.restaurants')}
-                                        isActive={isActive('restaurants')}
-                                        link={Pages.dmenu.restaurants.list}
-                                        activeName='dmenu'
-                                    />
-                                </div>
-
-                                <div className='text-xs text-[#8C90A3]'>
-                                    <SideBarItem
-                                        icon={<Sms variant={isActive('sms-count') ? 'Bold' : 'Outline'} color={isActive('sms-count') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                        title={t('sidebar.sms_count')}
-                                        isActive={isActive('sms-count')}
-                                        link={Pages.dmenu.restaurants.smsCountList}
-                                        activeName='dmenu'
-                                    />
-                                </div>
-                            </div>
-                        </>
-                    }
-
-                    {
-                        adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'dkala') &&
-                        <>
-                            <div onClick={() => handleOpenMenu('dkala')} className={clx(
-                                'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
-                                hasSubMenu && 'px-2 text-center',
-                                !hasSubMenu && 'flex gap-2 items-center'
-                            )}>
-                                {t('sidebar.dkala')}
-
-                                <div className={clx(
-                                    'transition-all',
-                                    !openMenu.includes('dkala') && 'rotate-180',
-                                    hasSubMenu && 'hidden'
-                                )}>
-                                    <ArrowDown2 size={18} color='#c3c7dd' />
-                                </div>
-                            </div>
-                            <div className={clx(
-                                'flex-1 flex flex-col justify-end',
-                                !openMenu.includes('dkala') && 'hidden'
-
-                            )}>
-
-                                <div className='text-xs text-[#8C90A3]'>
-                                    <SideBarItem
-                                        icon={<Icon variant={isActive('dkala/icons/list') ? 'Bold' : 'Outline'} color={isActive('dkala/icons/list') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                        title={t('sidebar.icons')}
-                                        isActive={isActive('dkala/icons/list')}
-                                        link={Pages.dkala.icons.list}
-                                        activeName='dkala'
-                                    />
-                                </div>
-
-                                <div className='text-xs text-[#8C90A3]'>
-                                    <SideBarItem
-                                        icon={<Category variant={isActive('dkala/icons/group') ? 'Bold' : 'Outline'} color={isActive('dkala/icons/group') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                        title={t('sidebar.groups_icon')}
-                                        isActive={isActive('dkala/icons/group')}
-                                        link={Pages.dkala.icons.groupList}
-                                        activeName='dkala'
-                                    />
-                                </div>
-
-                                <div className='text-xs text-[#8C90A3]'>
-                                    <SideBarItem
-                                        icon={<Warning2 variant={isActive('dkala/reports') ? 'Bold' : 'Outline'} color={isActive('dkala/reports') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                        title={t('sidebar.reports')}
-                                        isActive={isActive('dkala/reports')}
-                                        link={Pages.dkala.warnings.list}
-                                        activeName='dkala'
-                                    />
-                                </div>
-
-                                <div className='text-xs text-[#8C90A3]'>
-                                    <SideBarItem
-                                        icon={<Building variant={isActive('dkala/shops') ? 'Bold' : 'Outline'} color={isActive('dkala/shops') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                        title={t('sidebar.shops')}
-                                        isActive={isActive('dkala/shops')}
-                                        link={Pages.dkala.shops.list}
-                                        activeName='dkala'
-                                    />
-                                </div>
-
-                                <div className='text-xs text-[#8C90A3]'>
-                                    <SideBarItem
-                                        icon={<Sms variant={isActive('dkala/sms-count') ? 'Bold' : 'Outline'} color={isActive('dkala/sms-count') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                        title={t('sidebar.sms_count')}
-                                        isActive={isActive('dkala/sms-count')}
-                                        link={Pages.dkala.shops.smsCountList}
-                                        activeName='dkala'
-                                    />
-                                </div>
-                            </div>
-                        </>
-                    }
-                    {
-                        adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'dpage') &&
-                        <>
-                            <div onClick={() => handleOpenMenu('dpage')} className={clx(
-                                'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
-                                hasSubMenu && 'px-2 text-center',
-                                !hasSubMenu && 'flex gap-2 items-center'
-                            )}>
-                                {t('sidebar.dpage')}
-
-                                <div className={clx(
-                                    'transition-all',
-                                    !openMenu.includes('dpage') && 'rotate-180',
-                                    hasSubMenu && 'hidden'
-                                )}>
-                                    <ArrowDown2 size={18} color='#c3c7dd' />
-                                </div>
-                            </div>
-                            <div className={clx(
-                                'flex-1 flex flex-col justify-end',
-                                !openMenu.includes('dpage') && 'hidden'
-                            )}>
-
-                                <div className='text-xs text-[#8C90A3]'>
-                                    <SideBarItem
-                                        icon={<Icon variant={isActive('dpage/stickers/list') ? 'Bold' : 'Outline'} color={isActive('dpage/stickers/list') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                        title={t('sidebar.sticker')}
-                                        isActive={isActive('dpage/stickers/list')}
-                                        link={Pages.dpage.stickers.list}
-                                        activeName='dpage'
-                                    />
-                                </div>
-                            </div>
-                        </>
-                    }
-
-                    {
-                        adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === 'dmail') &&
-                        <>
-                            <div onClick={() => handleOpenMenu('dmail')} className={clx(
-                                'mt-10 px-12 text-header text-sm font-normal cursor-pointer',
-                                hasSubMenu && 'px-2 text-center',
-                                !hasSubMenu && 'flex gap-2 items-center'
-                            )}>
-                                {t('sidebar.dmail')}
-
-                                <div className={clx(
-                                    'transition-all',
-                                    !openMenu.includes('dmail') && 'rotate-180',
-                                    hasSubMenu && 'hidden'
-                                )}>
-                                    <ArrowDown2 size={18} color='#c3c7dd' />
-                                </div>
-                            </div>
-                            <div className={clx(
-                                'flex-1 flex flex-col justify-end',
-                                !openMenu.includes('dmail') && 'hidden'
-
-                            )}>
-
-                                <div className='text-xs text-[#8C90A3]'>
-                                    <SideBarItem
-                                        icon={<Global variant={isActive('dmail/domain/list') ? 'Bold' : 'Outline'} color={isActive('dmail/domain/list') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                                        title={t('sidebar.domain')}
-                                        isActive={isActive('dmail/domain/list')}
-                                        link={Pages.dmail.list}
-                                        activeName='dmail'
-                                    />
-                                </div>
-                            </div>
-                        </>
-                    }
-
-                    <div className='flex-1 flex flex-col justify-end mt-14'>
-                        <div className='text-xs text-[#8C90A3]'>
-
-                        </div>
-                        <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>
-
+                    title={t("sidebar.withdraw")}
+                    isActive={isActive("reseller/withdraw")}
+                    link={Pages.reseller.withdraw}
+                    activeName="reseller"
+                  />
                 </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'>
-                    {
-                        subMenuName === 'services' ?
-                            <ServicesSubMenu />
-                            : subMenuName === 'receipts' ?
-                                <ReceiptSubMenu />
-                                : subMenuName === 'customers' ?
-                                    <CustomerSubMenu />
-                                    : subMenuName === 'tickets' ?
-                                        <TicketSubMenu />
-                                        : subMenuName === 'users' ?
-                                            <UsersSubMenu />
-                                            : subMenuName === 'learning' ?
-                                                <LearningSubMenu />
-                                                : subMenuName === 'blog' ?
-                                                    <BlogSubMenu />
-                                                    : subMenuName === 'support' ?
-                                                        <SupportSubMenu />
-                                                        : subMenuName === 'accessLogs' ?
-                                                            <AccessLogsSubMenu />
-                                                            : null
-                    }
+          <div className={clx(!openMenu.includes("content") && "hidden")}>
+            <div className="text-xs text-[#8C90A3]">
+              <SideBarItem
+                icon={
+                  <DocumentLike
+                    variant={isActive("ads") ? "Bold" : "Outline"}
+                    color={isActive("ads") ? "black" : "#8C90A3"}
+                    size={iconSizeSideBar}
+                  />
+                }
+                title={t("sidebar.ads")}
+                isActive={isActive("ads")}
+                link={Pages.ads.list}
+                activeName="advertisements"
+              />
+            </div>
+
+            <div className="text-xs text-[#8C90A3]">
+              <SideBarItem
+                icon={
+                  <NotificationStatus
+                    variant={isActive("announcement") ? "Bold" : "Outline"}
+                    color={isActive("announcement") ? "black" : "#8C90A3"}
+                    size={iconSizeSideBar}
+                  />
+                }
+                title={t("sidebar.announcement")}
+                isActive={isActive("announcement")}
+                link={Pages.announcement.list}
+                activeName="announcements"
+              />
+            </div>
+
+            <div className="text-xs text-[#8C90A3]">
+              <SideBarItem
+                icon={
+                  <DocumentText
+                    variant={isActive("blog") ? "Bold" : "Outline"}
+                    color={isActive("blog") ? "black" : "#8C90A3"}
+                    size={iconSizeSideBar}
+                  />
+                }
+                title={t("sidebar.blog")}
+                isActive={isActive("blog")}
+                link={Pages.blog.list}
+                activeName="blogs"
+              />
+            </div>
+
+            <div className="text-xs text-[#8C90A3]">
+              <SideBarItem
+                icon={
+                  <Teacher
+                    variant={isActive("learning") ? "Bold" : "Outline"}
+                    color={isActive("learning") ? "black" : "#8C90A3"}
+                    size={iconSizeSideBar}
+                  />
+                }
+                title={t("sidebar.learning")}
+                isActive={isActive("learning")}
+                link={Pages.learning.list}
+                activeName="learnings"
+              />
+            </div>
+
+            <div className="text-xs text-[#8C90A3]">
+              <SideBarItem
+                icon={
+                  <SmsTracking
+                    variant={isActive("messages") ? "Bold" : "Outline"}
+                    color={isActive("messages") ? "black" : "#8C90A3"}
+                    size={iconSizeSideBar}
+                  />
+                }
+                title={t("sidebar.messages")}
+                isActive={isActive("messages")}
+                link={Pages.messages.list}
+                activeName="contacts_us"
+              />
+            </div>
+          </div>
+
+          {adminPermissions?.data?.permissions?.some(
+            (permission: { name: string }) => permission.name === "dmenu",
+          ) && (
+            <>
+              <div
+                onClick={() => handleOpenMenu("dmenu")}
+                className={clx(
+                  "mt-10 px-12 text-header text-sm font-normal cursor-pointer",
+                  hasSubMenu && "px-2 text-center",
+                  !hasSubMenu && "flex gap-2 items-center",
+                )}
+              >
+                {t("sidebar.dmenu")}
+
+                <div
+                  className={clx(
+                    "transition-all",
+                    !openMenu.includes("dmenu") && "rotate-180",
+                    hasSubMenu && "hidden",
+                  )}
+                >
+                  <ArrowDown2 size={18} color="#c3c7dd" />
+                </div>
+              </div>
+              <div
+                className={clx(
+                  "flex-1 flex flex-col justify-end",
+                  !openMenu.includes("dmenu") && "hidden",
+                )}
+              >
+                <div className="text-xs text-[#8C90A3]">
+                  <SideBarItem
+                    icon={
+                      <Icon
+                        variant={
+                          isActive("dmenu/icons/list") ? "Bold" : "Outline"
+                        }
+                        color={
+                          isActive("dmenu/icons/list") ? "black" : "#8C90A3"
+                        }
+                        size={iconSizeSideBar}
+                      />
+                    }
+                    title={t("sidebar.icons")}
+                    isActive={isActive("dmenu/icons/list")}
+                    link={Pages.dmenu.icons.list}
+                    activeName="dmenu"
+                  />
                 </div>
-            }
-        </>
-    )
-}
 
-export default SideBar
\ No newline at end of file
+                <div className="text-xs text-[#8C90A3]">
+                  <SideBarItem
+                    icon={
+                      <Category
+                        variant={
+                          isActive("dmenu/icons/group/list")
+                            ? "Bold"
+                            : "Outline"
+                        }
+                        color={
+                          isActive("dmenu/icons/group/list")
+                            ? "black"
+                            : "#8C90A3"
+                        }
+                        size={iconSizeSideBar}
+                      />
+                    }
+                    title={t("sidebar.groups_icon")}
+                    isActive={isActive("dmenu/icons/group/list")}
+                    link={Pages.dmenu.icons.groupList}
+                    activeName="dmenu"
+                  />
+                </div>
+
+                <div className="text-xs text-[#8C90A3]">
+                  <SideBarItem
+                    icon={
+                      <Warning2
+                        variant={isActive("dmenu/reports") ? "Bold" : "Outline"}
+                        color={isActive("dmenu/reports") ? "black" : "#8C90A3"}
+                        size={iconSizeSideBar}
+                      />
+                    }
+                    title={t("sidebar.reports")}
+                    isActive={isActive("dmenu/reports")}
+                    link={Pages.dmenu.warnings.list}
+                    activeName="dmenu"
+                  />
+                </div>
+
+                <div className="text-xs text-[#8C90A3]">
+                  <SideBarItem
+                    icon={
+                      <Building
+                        variant={isActive("restaurants") ? "Bold" : "Outline"}
+                        color={isActive("restaurants") ? "black" : "#8C90A3"}
+                        size={iconSizeSideBar}
+                      />
+                    }
+                    title={t("sidebar.restaurants")}
+                    isActive={isActive("restaurants")}
+                    link={Pages.dmenu.restaurants.list}
+                    activeName="dmenu"
+                  />
+                </div>
+
+                <div className="text-xs text-[#8C90A3]">
+                  <SideBarItem
+                    icon={
+                      <Sms
+                        variant={isActive("sms-count") ? "Bold" : "Outline"}
+                        color={isActive("sms-count") ? "black" : "#8C90A3"}
+                        size={iconSizeSideBar}
+                      />
+                    }
+                    title={t("sidebar.sms_count")}
+                    isActive={isActive("sms-count")}
+                    link={Pages.dmenu.restaurants.smsCountList}
+                    activeName="dmenu"
+                  />
+                </div>
+              </div>
+            </>
+          )}
+
+          {adminPermissions?.data?.permissions?.some(
+            (permission: { name: string }) => permission.name === "dkala",
+          ) && (
+            <>
+              <div
+                onClick={() => handleOpenMenu("dkala")}
+                className={clx(
+                  "mt-10 px-12 text-header text-sm font-normal cursor-pointer",
+                  hasSubMenu && "px-2 text-center",
+                  !hasSubMenu && "flex gap-2 items-center",
+                )}
+              >
+                {t("sidebar.dkala")}
+
+                <div
+                  className={clx(
+                    "transition-all",
+                    !openMenu.includes("dkala") && "rotate-180",
+                    hasSubMenu && "hidden",
+                  )}
+                >
+                  <ArrowDown2 size={18} color="#c3c7dd" />
+                </div>
+              </div>
+              <div
+                className={clx(
+                  "flex-1 flex flex-col justify-end",
+                  !openMenu.includes("dkala") && "hidden",
+                )}
+              >
+                <div className="text-xs text-[#8C90A3]">
+                  <SideBarItem
+                    icon={
+                      <Icon
+                        variant={
+                          isActive("dkala/icons/list") ? "Bold" : "Outline"
+                        }
+                        color={
+                          isActive("dkala/icons/list") ? "black" : "#8C90A3"
+                        }
+                        size={iconSizeSideBar}
+                      />
+                    }
+                    title={t("sidebar.icons")}
+                    isActive={isActive("dkala/icons/list")}
+                    link={Pages.dkala.icons.list}
+                    activeName="dkala"
+                  />
+                </div>
+
+                <div className="text-xs text-[#8C90A3]">
+                  <SideBarItem
+                    icon={
+                      <Category
+                        variant={
+                          isActive("dkala/icons/group") ? "Bold" : "Outline"
+                        }
+                        color={
+                          isActive("dkala/icons/group") ? "black" : "#8C90A3"
+                        }
+                        size={iconSizeSideBar}
+                      />
+                    }
+                    title={t("sidebar.groups_icon")}
+                    isActive={isActive("dkala/icons/group")}
+                    link={Pages.dkala.icons.groupList}
+                    activeName="dkala"
+                  />
+                </div>
+
+                <div className="text-xs text-[#8C90A3]">
+                  <SideBarItem
+                    icon={
+                      <Warning2
+                        variant={isActive("dkala/reports") ? "Bold" : "Outline"}
+                        color={isActive("dkala/reports") ? "black" : "#8C90A3"}
+                        size={iconSizeSideBar}
+                      />
+                    }
+                    title={t("sidebar.reports")}
+                    isActive={isActive("dkala/reports")}
+                    link={Pages.dkala.warnings.list}
+                    activeName="dkala"
+                  />
+                </div>
+
+                <div className="text-xs text-[#8C90A3]">
+                  <SideBarItem
+                    icon={
+                      <Building
+                        variant={isActive("dkala/shops") ? "Bold" : "Outline"}
+                        color={isActive("dkala/shops") ? "black" : "#8C90A3"}
+                        size={iconSizeSideBar}
+                      />
+                    }
+                    title={t("sidebar.shops")}
+                    isActive={isActive("dkala/shops")}
+                    link={Pages.dkala.shops.list}
+                    activeName="dkala"
+                  />
+                </div>
+
+                <div className="text-xs text-[#8C90A3]">
+                  <SideBarItem
+                    icon={
+                      <Sms
+                        variant={
+                          isActive("dkala/sms-count") ? "Bold" : "Outline"
+                        }
+                        color={
+                          isActive("dkala/sms-count") ? "black" : "#8C90A3"
+                        }
+                        size={iconSizeSideBar}
+                      />
+                    }
+                    title={t("sidebar.sms_count")}
+                    isActive={isActive("dkala/sms-count")}
+                    link={Pages.dkala.shops.smsCountList}
+                    activeName="dkala"
+                  />
+                </div>
+              </div>
+            </>
+          )}
+          {adminPermissions?.data?.permissions?.some(
+            (permission: { name: string }) => permission.name === "dpage",
+          ) && (
+            <>
+              <div
+                onClick={() => handleOpenMenu("dpage")}
+                className={clx(
+                  "mt-10 px-12 text-header text-sm font-normal cursor-pointer",
+                  hasSubMenu && "px-2 text-center",
+                  !hasSubMenu && "flex gap-2 items-center",
+                )}
+              >
+                {t("sidebar.dpage")}
+
+                <div
+                  className={clx(
+                    "transition-all",
+                    !openMenu.includes("dpage") && "rotate-180",
+                    hasSubMenu && "hidden",
+                  )}
+                >
+                  <ArrowDown2 size={18} color="#c3c7dd" />
+                </div>
+              </div>
+              <div
+                className={clx(
+                  "flex-1 flex flex-col justify-end",
+                  !openMenu.includes("dpage") && "hidden",
+                )}
+              >
+                <div className="text-xs text-[#8C90A3]">
+                  <SideBarItem
+                    icon={
+                      <Icon
+                        variant={
+                          isActive("dpage/stickers/list") ? "Bold" : "Outline"
+                        }
+                        color={
+                          isActive("dpage/stickers/list") ? "black" : "#8C90A3"
+                        }
+                        size={iconSizeSideBar}
+                      />
+                    }
+                    title={t("sidebar.sticker")}
+                    isActive={isActive("dpage/stickers/list")}
+                    link={Pages.dpage.stickers.list}
+                    activeName="dpage"
+                  />
+                </div>
+              </div>
+            </>
+          )}
+
+          {adminPermissions?.data?.permissions?.some(
+            (permission: { name: string }) => permission.name === "dmail",
+          ) && (
+            <>
+              <div
+                onClick={() => handleOpenMenu("dmail")}
+                className={clx(
+                  "mt-10 px-12 text-header text-sm font-normal cursor-pointer",
+                  hasSubMenu && "px-2 text-center",
+                  !hasSubMenu && "flex gap-2 items-center",
+                )}
+              >
+                {t("sidebar.dmail")}
+
+                <div
+                  className={clx(
+                    "transition-all",
+                    !openMenu.includes("dmail") && "rotate-180",
+                    hasSubMenu && "hidden",
+                  )}
+                >
+                  <ArrowDown2 size={18} color="#c3c7dd" />
+                </div>
+              </div>
+              <div
+                className={clx(
+                  "flex-1 flex flex-col justify-end",
+                  !openMenu.includes("dmail") && "hidden",
+                )}
+              >
+                <div className="text-xs text-[#8C90A3]">
+                  <SideBarItem
+                    icon={
+                      <Global
+                        variant={
+                          isActive("dmail/domain/list") ? "Bold" : "Outline"
+                        }
+                        color={
+                          isActive("dmail/domain/list") ? "black" : "#8C90A3"
+                        }
+                        size={iconSizeSideBar}
+                      />
+                    }
+                    title={t("sidebar.domain")}
+                    isActive={isActive("dmail/domain/list")}
+                    link={Pages.dmail.list}
+                    activeName="dmail"
+                  />
+                </div>
+              </div>
+            </>
+          )}
+
+          <div className="flex-1 flex flex-col justify-end mt-14">
+            <div className="text-xs text-[#8C90A3]"></div>
+            <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">
+          {subMenuName === "services" ? (
+            <ServicesSubMenu />
+          ) : subMenuName === "receipts" ? (
+            <ReceiptSubMenu />
+          ) : subMenuName === "customers" ? (
+            <CustomerSubMenu />
+          ) : subMenuName === "tickets" ? (
+            <TicketSubMenu />
+          ) : subMenuName === "users" ? (
+            <UsersSubMenu />
+          ) : subMenuName === "learning" ? (
+            <LearningSubMenu />
+          ) : subMenuName === "blog" ? (
+            <BlogSubMenu />
+          ) : subMenuName === "support" ? (
+            <SupportSubMenu />
+          ) : subMenuName === "accessLogs" ? (
+            <AccessLogsSubMenu />
+          ) : null}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default SideBar;