turkmen-expo/components/ui/burger-menu.tsx

"use client";

import { useEffect, useState } from "react";
import { v4 } from "uuid";
import { motion } from "framer-motion";
import { useLocale, useTranslations } from "next-intl";

import { useAppDispatch } from "@/redux/hooks";
import { setBurgerOpen } from "@/redux/slices/burgerSlice";
import clsx from "clsx";
import { burgerMenu, burgerMenu2 } from "@/lib/database/header";
import { useRouter, usePathname } from "@/i18n/navigation";
import { Link } from "@/i18n/navigation";
import { locales } from "@/i18n/config";

const burgerLangs = [
  { title: "Ру", localization: "ru" as const },
  { title: "En", localization: "en" as const },
  { title: "Tm", localization: "tm" as const },
];

export const BurgerMenu = () => {
  const dispatch = useAppDispatch();
  const locale = useLocale();
  const t = useTranslations();
  const router = useRouter();
  const pathname = usePathname();

  const [activeMenu, setActiveMenu] = useState<string>("");
  const [activeMenu2, setActiveMenu2] = useState<string>("");

  const setActiveTitle = () => {
    if (activeMenu.includes("/ser")) return t("nav.services");
  };

  const setActiveTitle2 = () => {
    if (activeMenu2.includes("/company")) return t("nav.about");
  };

  useEffect(() => {
    const wrapper = document.querySelector(".wrapper");
    wrapper?.classList.remove("overflow-hidden");
    wrapper?.classList.add("overflow-hidden");

    return () => {
      wrapper?.classList.remove("overflow-hidden");
    };
  }, []);

  return (
    <motion.div
      initial={{ x: "100%", opacity: 0 }}
      animate={{ x: 0, opacity: 1 }}
      transition={{
        duration: 0.5,
        ease: [0.55, 0, 0.1, 1],
      }}
      exit={{
        x: "100%",
        opacity: 0,
      }}
      className="bg-green overflow-auto fixed w-full z-50 top-[66px] bottom-0 left-0 min-h-[100vh] h-full px-4 py-10 flex flex-col overflow-y-auto"
    >
      {activeMenu && (
        <div>
          <div
            onClick={() => setActiveMenu("")}
            className="flex cursor-pointer"
          >
            <svg
              className="rotate-180"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12.6 12L8 7.4L9.4 6L15.4 12L9.4 18L8 16.6L12.6 12Z"
                fill="#303F4D"
              />
            </svg>
            <h2 className="text-[18px] ml-[10px] leading-[135%]">
              {setActiveTitle()}
            </h2>
          </div>

          <div className="mt-[10px] opacity-50 mb-5 h-[1px] w-full bg-blueBg" />
        </div>
      )}

      {activeMenu && (
        <div className="flex flex-col gap-5 leading-[150%]">
          {activeMenu.includes("/services") &&
            burgerMenu
              .filter((item) => item.services)
              .map((item, i) =>
                item.dropDown?.map((obj) => (
                  <Link
                    key={i}
                    onClick={() => dispatch(setBurgerOpen(false))}
                    href={obj.link}
                  >
                    {t(obj.titleKey)}
                  </Link>
                ))
              )}
        </div>
      )}

      <div className="leading-[135%] text-[18px] mb-10 flex flex-col gap-5">
        {!activeMenu &&
          burgerMenu.map((item, i) =>
            !item.drop ? (
              <Link
                key={i}
                onClick={() => {
                  dispatch(setBurgerOpen(false));
                }}
                href={item.link}
              >
                {t(item.titleKey)}
              </Link>
            ) : (
              <div
                key={i}
                className="cursor-pointer flex items-center justify-between"
                onClick={() => {
                  setActiveMenu(item.link);
                }}
              >
                {t(item.titleKey)}
                {item.drop && (
                  <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M12.6 12L8 7.4L9.4 6L15.4 12L9.4 18L8 16.6L12.6 12Z"
                      fill="#303F4D"
                    />
                  </svg>
                )}
              </div>
            )
          )}
      </div>

      <div className="h-[1px] w-full opacity-50 bg-blueBg" />

      {activeMenu2 && (
        <div>
          <div
            onClick={() => setActiveMenu2("")}
            className="flex cursor-pointer pt-4"
          >
            <img
              src="/assets/icons/header/burger-arrow.svg"
              alt="arrow"
              className="rotate-180"
            />
            <h2 className="text-[18px] ml-[10px] leading-[135%]">
              {setActiveTitle2()}
            </h2>
          </div>

          <div className="mt-[10px] opacity-50 mb-5 h-[1px] w-full bg-[#F2F9FF]" />
        </div>
      )}

      <div
        className={clsx("leading-[135%] text-[14px] flex flex-col gap-5", {
          "mt-10": !activeMenu2,
        })}
      >
        {activeMenu2.includes("/company") &&
          burgerMenu2
            .filter((item) => item.company)
            .map((obj) =>
              obj.dropDown?.map((item) => (
                <Link
                  key={v4()}
                  href={item.link}
                  onClick={() => {
                    dispatch(setBurgerOpen(false));
                  }}
                >
                  {t(item.titleKey)}
                </Link>
              ))
            )}
      </div>

      <div className="flex items-center mx-auto gap-10 mt-10">
        {burgerLangs.map((item, i) => (
          <div
            key={i}
            onClick={() => {
              router.replace(pathname, { locale: item.localization });
              dispatch(setBurgerOpen(false));
            }}
            className="flex cursor-pointer items-center gap-[10px]"
          >
            <img
              src={`/assets/icons/header/${item.localization}.svg`}
              alt="flag"
            />
            <p>{item.title}</p>
          </div>
        ))}
      </div>
    </motion.div>
  );
};