tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore(examples): set HTML dir attribute for RTL locales #10344 (#10345)

Browse Source 
fix [#10344](https://github.com/payloadcms/payload/issues/10344)

The template was missing defining direction.

direction property is necessary because HTML direction will be LTR for
RTL languages by default.
This commit is contained in:
Amir Aryan
2025-01-07 00:10:22 +03:30
committed by GitHub
parent 398b6096f2
commit df827c0fdd
2 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/localization/src/app/(frontend)/[locale]/layout.tsx
View File

@@ -20,6 +20,7 @@ import { getMessages, setRequestLocale } from 'next-intl/server'
import { NextIntlClientProvider } from 'next-intl' import { NextIntlClientProvider } from 'next-intl'
import { routing } from '@/i18n/routing' import { routing } from '@/i18n/routing'
import { notFound } from 'next/navigation' import { notFound } from 'next/navigation'
import localization from '@/i18n/localization'
type Args = { type Args = {
children: React.ReactNode children: React.ReactNode
@@ -30,6 +31,8 @@ type Args = {
export default async function RootLayout({ children, params }: Args) { export default async function RootLayout({ children, params }: Args) {
const { locale } = await params const { locale } = await params
const currentLocale = localization.locales.find((loc) => loc.code === locale)
const direction = currentLocale?.rtl ? 'rtl' : 'ltr'
if (!routing.locales.includes(locale as any)) { if (!routing.locales.includes(locale as any)) {
notFound() notFound()
@@ -43,6 +46,7 @@ export default async function RootLayout({ children, params }: Args) {
<html <html
className={cn(GeistSans.variable, GeistMono.variable)} className={cn(GeistSans.variable, GeistMono.variable)}
lang={locale} lang={locale}
dir={direction}
suppressHydrationWarning suppressHydrationWarning
> >
<head> <head>

2
examples/localization/src/globals/Header/Component.client.tsx
View File

@@ -45,7 +45,7 @@ export const HeaderClient: React.FC<HeaderClientProps> = ({ header }) => {
className="container relative z-20 py-8 flex justify-end gap-2" className="container relative z-20 py-8 flex justify-end gap-2"
{...(theme ? { 'data-theme': theme } : {})} {...(theme ? { 'data-theme': theme } : {})}
> >
<Link href="/" className="mr-auto"> <Link href="/" className="me-auto">
<Logo /> <Logo />
</Link> </Link>
<LocaleSwitcher /> <LocaleSwitcher />