implement localization
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user