fix covered theme switch popup when i18n is not setup (#763)

shuding · Sep 1, 2022 · fdfe4f8 · fdfe4f8
1 parent 77361da
commit fdfe4f8
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/.changeset/four-camels-jog.md b/.changeset/four-camels-jog.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+fix covered theme switch popup when i18n is not setup
diff --git a/packages/nextra-theme-docs/src/components/locale-switch.tsx b/packages/nextra-theme-docs/src/components/locale-switch.tsx
@@ -13,6 +13,7 @@ export function LocaleSwitch({ options }: LocaleSwitchProps): ReactElement {
   const selected = options.find(l => locale === l.locale)
   return (
     <Select
+      position="left"
       onChange={option => {
         const date = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000)
         document.cookie = `NEXT_LOCALE=${

diff --git a/packages/nextra-theme-docs/src/components/select.tsx b/packages/nextra-theme-docs/src/components/select.tsx
@@ -18,7 +18,7 @@ interface MenuProps {
 export function Select({
   options,
   selected,
-  position = 'left',
+  position,
   onChange
 }: MenuProps): ReactElement {
   return (
@@ -45,10 +45,11 @@ export function Select({
             <Listbox.Options
               className={cn(
                 'absolute bottom-[130%] z-20 mt-1 max-h-64 min-w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black/5 focus:outline-none dark:bg-neutral-800 dark:ring-white/20',
-                {
-                  left: 'rtl:right-0 ltr:left-0',
-                  right: 'ltr:right-0 rtl:left-0'
-                }[position]
+                position &&
+                  {
+                    left: 'rtl:right-0 ltr:left-0',
+                    right: 'ltr:right-0 rtl:left-0'
+                  }[position]
               )}
             >
               {options.map(option => (

diff --git a/packages/nextra-theme-docs/src/components/theme-switch.tsx b/packages/nextra-theme-docs/src/components/theme-switch.tsx
@@ -3,15 +3,17 @@ import { useTheme } from 'next-themes'
 import { Select } from './select'
 import { SunIcon, MoonIcon } from 'nextra/icons'
 import { useMounted } from '../utils'
+import { useConfig } from '../contexts'
 
 export function ThemeSwitch({ lite = true }): ReactElement {
   const { theme, setTheme, systemTheme } = useTheme()
   const renderedTheme = theme === 'system' ? systemTheme : theme
+  const config = useConfig()
   const mounted = useMounted()
 
   return (
     <Select
-      position={lite ? 'right' : 'left'}
+      position={config.i18n.length > 0 ? (lite ? 'right' : 'left') : undefined}
       onChange={option => {
         setTheme(option.key)
       }}