feat: enhance mobile navigation with RTL support and modal integration

src/components/layout/mobile-navigation.tsx

@@ -1,6 +1,6 @@
 // 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";
@@ -9,20 +9,20 @@ import Link from "next/link";
 import LanguageSwitcher from "../language-switcher";
 import { i18n, useTranslation } from "next-i18next"; // Import useTranslation
 
-const isRTL = i18n?.dir() === "rtl";
-
 // Adjust sidebar variants based on RTL
+
+const MobileNavigation = () => {
+  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
   };
-
-const MobileNavigation = () => {
-  const { displaySidebar, closeSidebar } = useUI();
-  const { t } = useTranslation("common");  // Use the translation hook for common translations
-  console.log(isRTL);
-
+  useEffect(() => {
+    setIsRTL(i18n?.dir().trim() === "rtl");
+  }, [i18n?.language]);
   useEffect(() => {
     document.body.style.overflow = displaySidebar ? "hidden" : "auto";
   }, [displaySidebar]);
@@ -60,12 +60,20 @@ 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"