diff --git a/package.json b/package.json index 9c152ede..eaefc83a 100644 --- a/package.json +++ b/package.json @@ -140,6 +140,7 @@ "remark-gfm": "^3.0.1", "remark-html": "^16.0.1", "resolve-accept-language": "^3.1.8", + "rtl-detect": "^1.1.2", "serwist": "^9.0.10", "superjson": "^2.2.1", "swr": "^2.2.5", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3e0dd914..68ea47e6 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,19 +1,27 @@ import { ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface'; +import { cookies } from 'next/headers'; import { PropsWithChildren } from 'react'; +import { isRtlLang } from 'rtl-detect'; import Analytics from '@/components/Analytics'; import NProgress from '@/components/NProgress'; +import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/constants/locale'; import PWAInstall from '@/features/PWAInstall'; import Layout from '@/layout'; import { isMobileDevice } from '@/utils/server/responsive'; import StyleRegistry from './StyleRegistry'; -const RootLayout = ({ children }: PropsWithChildren) => { +const RootLayout = async ({ children }: PropsWithChildren) => { // get default theme config to use with ssr + const cookieStore = await cookies(); + const lang = cookieStore.get(LOBE_LOCALE_COOKIE); + const locale = lang?.value || DEFAULT_LANG; + + const direction = isRtlLang(locale) ? 'rtl' : 'ltr'; return ( - +