104 lines
3.5 KiB
JavaScript
104 lines
3.5 KiB
JavaScript
"use client";
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
SheetTrigger,
|
|
} from "@/components/ui/sheet";
|
|
import { settingsData } from "@/redux/reducer/settingSlice";
|
|
import { t } from "@/utils";
|
|
import { GiHamburgerMenu } from "react-icons/gi";
|
|
import { useSelector } from "react-redux";
|
|
import LanguageDropdown from "../../Common/LanguageDropdown";
|
|
import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
|
|
import CustomImage from "@/components/Common/CustomImage";
|
|
|
|
const LandingMobileMenu = ({ isOpen, setIsOpen, activeSection }) => {
|
|
const CurrentLanguage = useSelector(CurrentLanguageData);
|
|
const settings = useSelector(settingsData);
|
|
|
|
const scrollToSection = (id) => {
|
|
const section = document.getElementById(id);
|
|
if (section) {
|
|
setIsOpen(false);
|
|
section.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Sheet open={isOpen} onOpenChange={setIsOpen} className="lg:hidden">
|
|
<SheetTrigger asChild className="lg:hidden">
|
|
<button
|
|
id="hamburg"
|
|
className="text-2xl cursor-pointer border rounded-lg p-1"
|
|
>
|
|
<GiHamburgerMenu size={25} className="text-primary" />
|
|
</button>
|
|
</SheetTrigger>
|
|
<SheetContent className="[&>button:first-child]:hidden] p-0">
|
|
<SheetHeader className="py-4 px-6 border-b border">
|
|
<SheetTitle>
|
|
<CustomImage
|
|
src={settings?.header_logo}
|
|
width={195}
|
|
height={52}
|
|
alt="Logo"
|
|
className="w-full h-[52px] object-contain ltr:object-left rtl:object-right max-w-[195px]"
|
|
/>
|
|
</SheetTitle>
|
|
</SheetHeader>
|
|
<div className="p-6">
|
|
<div className="flex flex-col list-none">
|
|
<li
|
|
className={`cursor-pointer py-3 border-b border-dashed transition-all duration-200 ${
|
|
activeSection === "anythingYouWant"
|
|
? "text-primary"
|
|
: "hover:text-primary"
|
|
}`}
|
|
onClick={() => scrollToSection("anythingYouWant")}
|
|
>
|
|
{t("home")}
|
|
</li>
|
|
<li
|
|
className={`cursor-pointer py-3 border-b border-dashed transition-all duration-200 ${
|
|
activeSection === "work_process"
|
|
? "text-primary"
|
|
: "hover:text-primary"
|
|
}`}
|
|
onClick={() => scrollToSection("work_process")}
|
|
>
|
|
{t("whyChooseUs")}
|
|
</li>
|
|
<li
|
|
className={`cursor-pointer py-3 border-b border-dashed transition-all duration-200 ${
|
|
activeSection === "faq"
|
|
? "text-primary font-semibold bg-primary/5"
|
|
: "hover:text-primary"
|
|
}`}
|
|
onClick={() => scrollToSection("faq")}
|
|
>
|
|
{t("faqs")}
|
|
</li>
|
|
<li
|
|
className={`cursor-pointer py-3 border-b border-dashed transition-all duration-200 ${
|
|
activeSection === "ourBlogs"
|
|
? "text-primary font-semibold bg-primary/5"
|
|
: "hover:text-primary"
|
|
}`}
|
|
onClick={() => scrollToSection("ourBlogs")}
|
|
>
|
|
{t("blog")}
|
|
</li>
|
|
<li className="py-3">
|
|
<LanguageDropdown />
|
|
</li>
|
|
</div>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
};
|
|
|
|
export default LandingMobileMenu;
|