danak-website/src/shared/SideBar.tsx

"use client";
import Button from "@/components/Button";
import { CONSOLE_URL, LOGIN_URL } from "@/config/const";
import { Building4, CodeCircle, DocumentText, Element3, Element4, Home2, UserSquare } from "iconsax-react";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { FC } from "react";
import { clx } from "../helpers/utils";
import SideBarItem from "./SideBarItem";
import { useSharedStore } from "./store/sharedStore";

const SideBar: FC = () => {
  const { openSidebar, setOpenSidebar, isLogin } = useSharedStore();
  const pathname = usePathname();
  const isActive = (name: string) => {
    if (pathname === "/" && name === "home") {
      return true;
    }
    return pathname.includes(name);
  };

  const iconSizeSideBar = 20;

  return (
    <>
      {openSidebar && <div className="fixed top-0 left-0 right-0 bottom-0 bg-black/50 z-10" onClick={() => setOpenSidebar(false)} />}
      <div
        className={clx(
          "fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible   xl: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",
        )}
      >
        <div className="flex justify-center">
          <Image src={"/images/logo.svg"} width={140} height={40} alt="logo" className="w-[140px]" />
        </div>

        <div className="flex-1 flex flex-col h-full overflow-y-auto no-scrollbar">
          <div className="mt-10 px-12 text-header text-sm font-normal">منو</div>

          <div className="text-xs text-[#8C90A3]">
            <SideBarItem
              icon={<Home2 variant={isActive("home") ? "Bold" : "Outline"} color={isActive("home") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
              title="صفحه اصلی"
              isActive={isActive("home")}
              link={"/"}
            />

            <SideBarItem
              icon={<Element3 variant={isActive("products") ? "Bold" : "Outline"} color={isActive("products") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
              title={"محصولات"}
              isActive={isActive("products")}
              link={"/products"}
            />

            <SideBarItem
              icon={<Element4 variant={isActive("danak-services") ? "Bold" : "Outline"} color={isActive("danak-services") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
              title={"خدمات دناک"}
              isActive={isActive("danak-services")}
              link={"/danak-services"}
            />

            <SideBarItem
              icon={<UserSquare variant={isActive("representatives") ? "Bold" : "Outline"} color={isActive("representatives") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
              title={"نمایندگان"}
              isActive={isActive("representatives")}
              link={"/representatives"}
            />

            <SideBarItem
              icon={<CodeCircle variant={isActive("developers") ? "Bold" : "Outline"} color={isActive("developers") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
              title={"توسعه دهندگان"}
              isActive={isActive("developers")}
              link={"/developers"}
            />

            <SideBarItem
              icon={<Building4 variant={isActive("about") ? "Bold" : "Outline"} color={isActive("about") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
              title={"درباره ما"}
              isActive={isActive("about")}
              link={"/about"}
            />

            <SideBarItem
              icon={<DocumentText variant={isActive("blogs") ? "Bold" : "Outline"} color={isActive("blogs") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
              title={"مجله دی مگ"}
              isActive={isActive("blogs")}
              link={"/dmag"}
            />

            <SideBarItem
              icon={<DocumentText variant={isActive("contact") ? "Bold" : "Outline"} color={isActive("contact") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
              title={"تماس با ما"}
              isActive={isActive("contact")}
              link={"/contact"}
            />
          </div>

          {typeof window !== "undefined" &&
            (() => {
              if (!isLogin)
                return (
                  <div className="flex-1 flex items-end justify-center px-12">
                    <Link className="w-full" href={`${LOGIN_URL}`}>
                      <Button label="ورود | ثبت نام" />
                    </Link>
                  </div>
                );
              else
                return (
                  <div className="flex-1 flex items-end justify-center px-12">
                    <Link className="w-full" href={`${CONSOLE_URL}/dashboard`}>
                      <Button label="ناحیه کاربری" />
                    </Link>
                  </div>
                );
            })()}
        </div>
      </div>
    </>
  );
};

export default SideBar;