implement localization

This commit is contained in:
2026-05-18 05:47:02 +03:30
parent e4ee983393
commit 774e2043c2
45 changed files with 704 additions and 140 deletions

View File

@@ -10,6 +10,7 @@ import {
import AppLogo from '@/components/app-logo';
import AppLogoIcon from '@/components/app-logo-icon';
import { Breadcrumbs } from '@/components/breadcrumbs';
import { LanguageSwitcher } from '@/components/language-switcher';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import {
@@ -54,7 +55,7 @@ const activeItemStyles = 'bg-accent text-accent-foreground';
export function AppHeader({ breadcrumbs = [] }: Props) {
const page = usePage();
const { auth } = page.props;
const { auth, localization } = page.props;
const getInitials = useInitials();
const { isCurrentUrl, whenCurrentUrl } = useCurrentUrl();
const { t } = useTranslation();
@@ -100,19 +101,19 @@ export function AppHeader({ breadcrumbs = [] }: Props) {
<Button
variant="ghost"
size="icon"
className="mr-2 h-[34px] w-[34px]"
className="me-2 h-[34px] w-[34px]"
>
<Menu className="h-5 w-5" />
</Button>
</SheetTrigger>
<SheetContent
side="left"
side={localization.isRtl ? 'right' : 'left'}
className="flex h-full w-64 flex-col items-stretch justify-between bg-sidebar"
>
<SheetTitle className="sr-only">
{t('Navigation menu')}
</SheetTitle>
<SheetHeader className="flex justify-start text-left">
<SheetHeader className="flex justify-start text-start">
<AppLogoIcon className="h-6 w-6 fill-current text-black dark:text-white" />
</SheetHeader>
<div className="flex h-full flex-1 flex-col space-y-4 p-4">
@@ -122,7 +123,7 @@ export function AppHeader({ breadcrumbs = [] }: Props) {
<Link
key={item.title}
href={item.href}
className="flex items-center space-x-2 font-medium"
className="flex items-center gap-2 font-medium"
>
{item.icon && (
<item.icon className="h-5 w-5" />
@@ -142,15 +143,15 @@ export function AppHeader({ breadcrumbs = [] }: Props) {
<Link
href={home()}
prefetch
className="flex items-center space-x-2"
className="flex items-center gap-2"
>
<AppLogo />
</Link>
{/* Desktop Navigation */}
<div className="ml-6 hidden h-full items-center space-x-6 lg:flex">
<div className="ms-6 hidden h-full items-center gap-6 lg:flex">
<NavigationMenu className="flex h-full items-stretch">
<NavigationMenuList className="flex h-full items-stretch space-x-2">
<NavigationMenuList className="flex h-full items-stretch gap-2">
{mainNavItems.map((item, index) => (
<NavigationMenuItem
key={index}
@@ -168,7 +169,7 @@ export function AppHeader({ breadcrumbs = [] }: Props) {
)}
>
{item.icon && (
<item.icon className="mr-2 h-4 w-4" />
<item.icon className="me-2 h-4 w-4" />
)}
{t(item.title)}
</Link>
@@ -181,8 +182,9 @@ export function AppHeader({ breadcrumbs = [] }: Props) {
</NavigationMenu>
</div>
<div className="ml-auto flex items-center space-x-2">
<div className="relative flex items-center space-x-1">
<div className="ms-auto flex items-center gap-2">
<LanguageSwitcher className="hidden sm:inline-flex" />
<div className="relative flex items-center gap-1">
<Button
asChild
variant="ghost"
@@ -193,7 +195,7 @@ export function AppHeader({ breadcrumbs = [] }: Props) {
<Search className="!size-5 opacity-80 group-hover:opacity-100" />
</Link>
</Button>
<div className="ml-1 hidden gap-1 lg:flex">
<div className="ms-1 hidden gap-1 lg:flex">
<Tooltip>
<TooltipTrigger asChild>
<Link