feat: update mobile navigation for RTL support and refactor DuaComponent to use fetched data

src/components/layout/mobile-navigation.tsx

@@ -10,19 +10,19 @@ import LanguageSwitcher from "../language-switcher";
 import { i18n, useTranslation } from "next-i18next"; // Import useTranslation
 
 // Adjust sidebar variants based on RTL
-
+const rtlLanguages = ["ar", "ur", "fa", "ks", "tg", "bn"];
 const MobileNavigation = () => {
   const { displaySidebar, closeSidebar, openModal } = useUI();
   const { t } = useTranslation("common"); // Use the translation hook for common translations
-  const [isRTL, setIsRTL] = useState(false);
+  const isRTL =
+    rtlLanguages.includes(i18n?.language) || false;
+  console.log(i18n?.language);
+  
   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]);

src/pages/duas/[slug].tsx

@@ -62,6 +62,7 @@ const DuaComponent: React.FC<DuaComponentProps> = ({
   const [recitingPart, setRecitingPart] = useState<Dua | null>(null);
   const [loading, setLoading] = useState(false);
   const [nextURL, setNextURL] = useState("");
+  const [data, setData] = useState({});
 
   // Add event listeners for wheel and touch
   useEffect(() => {
@@ -96,6 +97,7 @@ const DuaComponent: React.FC<DuaComponentProps> = ({
       setLoading(true);
       const duaResponse = await http.get<DuaPartsResponse>(URL);
       setDuaParts((prev) => [...prev, ...duaResponse.data.results]);
+      setData(duaResponse.data);
       setNextURL(duaResponse.data.next);
       getAudio(id);
     } catch (error) {
@@ -116,6 +118,7 @@ const DuaComponent: React.FC<DuaComponentProps> = ({
     }
     fetchData();
   }, [slug]);
+console.log(data);
 
   const playAudio = useCallback(
     (part: Dua) => {
@@ -172,17 +175,17 @@ const DuaComponent: React.FC<DuaComponentProps> = ({
     setRecitingPart(currentRecitingPart);
   }, [audio, duaParts]);
 
-  function processSlug(slug: string): string {
-    if (!slug) return "";
-    const parts = slug.split("-");
-    if (parts.length === 0) return "";
-    parts.pop();
-    return parts
-      .map(
-        (word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
-      )
-      .join(" ");
-  }
+  // function processSlug(slug: string): string {
+  //   if (!slug) return "";
+  //   const parts = slug.split("-");
+  //   if (parts.length === 0) return "";
+  //   parts.pop();
+  //   return parts
+  //     .map(
+  //       (word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
+  //     )
+  //     .join(" ");
+  // }
 
   const handleBack = () => {
     if (SelectedDua) {
@@ -241,8 +244,8 @@ const DuaComponent: React.FC<DuaComponentProps> = ({
     [fetching, setAutoScroll]
   );
 
-  const title = duaParts[0]?.seo_field?.title;
-  const description = duaParts[0]?.seo_field?.description;
+  const title = data?.seo_field?.title;
+  const description = data?.seo_field?.description;
   const keywords = "dua, islam, prayer, supplication, dua parts";
 
   return (
@@ -262,7 +265,7 @@ const DuaComponent: React.FC<DuaComponentProps> = ({
           >
             <FaArrowLeft size={18} />
           </button>
-          <p className="text-sm font-semibold">{processSlug(slug)}</p>
+          <p className="text-sm font-semibold">{data?.title}</p>
           <div className="relative">
             <button
               className="p-2 bg-white/20 rounded-2xl"