ghaddaditw
2f4868a419
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
65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
import { useTranslation } from 'react-i18next';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
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: '🇴🇲' }
|
|
];
|
|
|
|
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 (
|
|
<DropdownMenu>
|
|
<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>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
{languages.map((language) => (
|
|
<DropdownMenuItem
|
|
key={language.code}
|
|
onClick={() => changeLanguage(language.code)}
|
|
className={`gap-2 ${i18n.language === language.code ? 'bg-accent' : ''}`}
|
|
>
|
|
<span>{language.flag}</span>
|
|
<span>{language.name}</span>
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
} |