feat: enhance mobile navigation with RTL support and modal integration

src/components/layout/mobile-navigation.tsx

@@ -1,28 +1,28 @@
 // components/MobileNavigation.tsx
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { useUI } from "../context/ui.context";
 import Logo from "../ui/logo";
 import { IoMdClose } from "react-icons/io";
 import Link from "next/link";
 import LanguageSwitcher from "../language-switcher";
-import { i18n, useTranslation } from "next-i18next";  // Import useTranslation
-
-const isRTL = i18n?.dir() === "rtl";
+import { i18n, useTranslation } from "next-i18next"; // Import useTranslation
 
 // Adjust sidebar variants based on RTL
-const sidebarVariants = {
-  hidden: { x: isRTL ? "100%" : "-100%" }, // Start off-screen to the right for RTL, left for LTR
-  visible: { x: 0 },                      // Fully visible on the screen
-  exit: { x: isRTL ? "100%" : "-100%" },  // Exit to the right for RTL, left for LTR
-};
 
 const MobileNavigation = () => {
-  const { displaySidebar, closeSidebar } = useUI();
-  const { t } = useTranslation("common");  // Use the translation hook for common translations
-  console.log(isRTL);
-
+  const { displaySidebar, closeSidebar, openModal } = useUI();
+  const { t } = useTranslation("common"); // Use the translation hook for common translations
+  const [isRTL, setIsRTL] = useState(false);
+  const sidebarVariants = {
+    hidden: { x: isRTL ? "100%" : "-100%" }, // Start off-screen to the right for RTL, left for LTR
+    visible: { x: 0 }, // Fully visible on the screen
+    exit: { x: isRTL ? "100%" : "-100%" }, // Exit to the right for RTL, left for LTR
+  };
+  useEffect(() => {
+    setIsRTL(i18n?.dir().trim() === "rtl");
+  }, [i18n?.language]);
   useEffect(() => {
     document.body.style.overflow = displaySidebar ? "hidden" : "auto";
   }, [displaySidebar]);
@@ -60,17 +60,25 @@ const MobileNavigation = () => {
                 <div className="mt-14">
                   <ul className="flex flex-col gap-8 font-semibold text-black h-full items-start">
                     <li className="h-full flex items-center border-[#c79389] hover:border-b hover:text-[#EB6E57] ">
-                      <Link href={"/"}>{t("home")}</Link>  {/* Translated text */}
+                      <Link href={"/"}>{t("home")}</Link>{" "}
+                      {/* Translated text */}
                     </li>
                     <li className="h-full flex items-center border-[#F4846F] hover:border-b hover:text-[#EB6E57] ">
-                      <Link href={"/about"}>{t("about")}</Link>  {/* Translated text */}
+                      <Link href={"/about"}>{t("about")}</Link>{" "}
+                      {/* Translated text */}
                     </li>
-                    <li className="">
+                    <li
+                      onClick={() => {
+                        openModal("DONATE_VIEW");
+                        closeSidebar();
+                      }}
+                      className=""
+                    >
                       <Link
                         href={"/"}
                         className="bg-gradient-to-r from-[#F79B59] to-[#EB6E57] text-transparent bg-clip-text font-semibold"
                       >
-                        {t("donate")}  {/* Translated text */}
+                        {t("donate")} {/* Translated text */}
                       </Link>
                     </li>
                   </ul>