Improve app's language switching and add Omani professionals directory

Fixes RTL layout issues, persists language preference, adds Omani professional directory and translates sidebar navigation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c5f0c281-8dd8-4846-b452-4a07bcd21062
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/9777c70b-fc38-4831-8d6b-78dfffe041b0/7b0998af-3fae-48c5-b382-eb5130b5525d.jpg

client/src/components/LanguageSwitcher.tsx

@@ -7,22 +7,37 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Languages } from 'lucide-react';
+import { useEffect } from 'react';
 
 export function LanguageSwitcher() {
   const { i18n } = useTranslation();
 
   const languages = [
     { code: 'en', name: 'English', flag: '🇺🇸' },
-    { code: 'ar', name: 'العربية', flag: '🇸🇦' }
+    { code: 'ar', name: 'العربية', flag: '🇴🇲' }
   ];
 
-  const changeLanguage = (langCode: string) => {
-    i18n.changeLanguage(langCode);
-    // Update document direction for Arabic
+  const changeLanguage = async (langCode: string) => {
+    await i18n.changeLanguage(langCode);
+    // Update document direction and language for proper RTL support
     document.documentElement.dir = langCode === 'ar' ? 'rtl' : 'ltr';
     document.documentElement.lang = langCode;
+    // Store in localStorage for persistence
+    localStorage.setItem('language', langCode);
+    // Force re-render of components
+    window.location.reload();
   };
 
+  // Initialize language on component mount
+  useEffect(() => {
+    const savedLanguage = localStorage.getItem('language');
+    if (savedLanguage && savedLanguage !== i18n.language) {
+      i18n.changeLanguage(savedLanguage);
+      document.documentElement.dir = savedLanguage === 'ar' ? 'rtl' : 'ltr';
+      document.documentElement.lang = savedLanguage;
+    }
+  }, [i18n]);
+
   const currentLanguage = languages.find(lang => lang.code === i18n.language) || languages[0];
 
   return (
@@ -30,7 +45,7 @@ export function LanguageSwitcher() {
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" size="sm" className="gap-2">
           <Languages className="h-4 w-4" />
-          <span className="hidden sm:inline">{currentLanguage.flag} {currentLanguage.name}</span>
+          <span className="hidden sm:inline">{currentLanguage?.flag} {currentLanguage?.name}</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">