dpage-editor/src/shared/SideBar.tsx

import { Brush2, DocumentText, Home2, Logout } from "iconsax-react";
import { type FC, useEffect } 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 { Paths } from "../config/Paths";
import { clx } from "../helpers/utils";
import BuyCatalog from "./components/BuyCatalog";
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 isActive = (path: string) => {
    const pathname = location.pathname;
    if (path === "/") return pathname === "/";
    return pathname === path || pathname.startsWith(path + "/");
  };

  useEffect(() => {
    const split = location.pathname.split("/");

    if (split[1] === "dashboard" || split[1] === "products") {
      setSubMenuName(split[1]);
      setSubtMenu(true);
    } else {
      setSubMenuName("");
      setSubtMenu(false);
    }
  }, [location.pathname, setSubMenuName, setSubtMenu]);

  const iconSizeSideBar = 20;

  return (
    <>
      {openSidebar && <div className="fixed top-0 left-0 right-0 bottom-0 bg-black/50 bg-opacity-50 z-10" onClick={() => setOpenSidebar(false)} />}
      <div
        className={clx(
          "fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100  xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[250px] bg-white flex-col py-12",
          openSidebar && "opacity-100 visible translate-x-0 block z-40",
          hasSubMenu && "w-24 rounded-tl-none! rounded-bl-none!",
        )}
      >
        <div className="flex justify-center">{!hasSubMenu ? <img src={LogoImage} className="w-[140px]" /> : <img src={LogoSmall} className="w-7" />}</div>

        <div className="flex-1 flex flex-col h-full overflow-y-auto no-scrollbar">
          <div className={clx("mt-10 px-12 text-header text-sm font-normal", hasSubMenu && "px-2 text-center")}>{t("sidebar.menu")}</div>

          <div className="text-xs text-[#8C90A3]">
            <SideBarItem
              icon={<Home2 variant={isActive(Paths.home) ? "Bold" : "Outline"} color={isActive(Paths.home) ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
              title={t("sidebar.home_page")}
              isActive={isActive(Paths.home)}
              link={Paths.home}
              activeName={Paths.home}
            />

            <SideBarItem
              icon={<DocumentText variant={isActive(Paths.catalog.list) ? "Bold" : "Outline"} color={isActive(Paths.catalog.list) ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
              title={t("sidebar.catalog")}
              isActive={isActive(Paths.catalog.list)}
              link={Paths.catalog.list}
              activeName={Paths.catalog.list}
            />

            <SideBarItem
              icon={<Brush2 variant={isActive(Paths.designer.list) ? "Bold" : "Outline"} color={isActive(Paths.designer.list) ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
              title={t("sidebar.request_design")}
              isActive={isActive(Paths.designer.list)}
              link={Paths.designer.list}
              activeName={Paths.designer.list}
            />
          </div>

          <div className="flex-1 flex flex-col justify-end mt-14">
            <BuyCatalog />
            <div className="text-xs text-[#8C90A3] mt-5">
              <SideBarItem
                icon={<Logout variant={isActive("logout") ? "Bold" : "Outline"} color={isActive("logout") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                title="خروج"
                isActive={isActive("logout")}
                link={`#`}
                isLogout
                activeName=""
              />
            </div>
          </div>
        </div>
      </div>

      {/* منوی فرعی */}
      {hasSubMenu && (openSidebar || window.innerWidth > 1139) && (
        <div className="fixed  xl:right-[112px] right-[96px] bg-white z-20 xl:top-4 xl:bottom-4 top-0 bottom-0 rounded-tl-[32px] rounded-bl-[32px] w-[190px] border-r border-border">
          {subMenuName === "dashboard"
            ? null
            : // <DashboardSubMenu />
              null}
        </div>
      )}
    </>
  );
};

export default SideBar;