From 84b47200fc0b3bcb79ef9ce6f03a70db2b30e8a9 Mon Sep 17 00:00:00 2001
From: SamP231004 <samp231004@gmail.com>
Date: Mon, 10 Nov 2025 22:50:35 +0530
Subject: [PATCH] fix(sidebar): ensure language & theme buttons visible in
 mobile drawer

---
 src/app/(main)/MobileNav.tsx                  |  2 +
 src/components/input/MobileLanguageButton.tsx | 74 +++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 src/components/input/MobileLanguageButton.tsx

diff --git a/src/app/(main)/MobileNav.tsx b/src/app/(main)/MobileNav.tsx
index a1944960..934c43fa 100644
--- a/src/app/(main)/MobileNav.tsx
+++ b/src/app/(main)/MobileNav.tsx
@@ -8,6 +8,7 @@ import { Grid, IconLabel, NavMenu, NavMenuItem, Row, Text } from '@umami/react-z
 import Link from 'next/link';
 import { AdminNav } from './admin/AdminNav';
 import { SettingsNav } from './settings/SettingsNav';
+import { MobileLanguageButton } from '@/components/input/MobileLanguageButton';
 
 export function MobileNav() {
   const { formatMessage, labels } = useMessages();
@@ -54,6 +55,7 @@ export function MobileNav() {
                   );
                 })}
               </NavMenu>
+              <MobileLanguageButton />
               {websiteId && <WebsiteNav websiteId={websiteId} onItemClick={close} />}
               {isAdmin && <AdminNav onItemClick={close} />}
               {isSettings && <SettingsNav onItemClick={close} />}
diff --git a/src/components/input/MobileLanguageButton.tsx b/src/components/input/MobileLanguageButton.tsx
new file mode 100644
index 00000000..e53be70e
--- /dev/null
+++ b/src/components/input/MobileLanguageButton.tsx
@@ -0,0 +1,74 @@
+import { Icon, Button, MenuTrigger, Popover, Grid, Text, Dialog, Row } from '@umami/react-zen';
+import { languages } from '@/lib/lang';
+import { useLocale } from '@/components/hooks';
+import { Globe } from 'lucide-react';
+import { ThemeButton } from '@umami/react-zen';
+
+export function MobileLanguageButton() {
+  const { locale, saveLocale } = useLocale();
+  const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
+
+  function handleSelect(value: string) {
+    saveLocale(value);
+  }
+
+  return (
+    <Row
+      style={{
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        padding: 16,
+        backgroundColor: 'var(--background)',
+        borderTop: '1px solid var(--border)',
+        gap: 8,
+        justifyContent: 'center',
+        zIndex: 1000,
+      }}
+    >
+      <MenuTrigger>
+        <Button variant="quiet">
+          <Icon>
+            <Globe />
+          </Icon>
+        </Button>
+        <Popover
+          placement="top"
+          style={{
+            width: '75vw',
+            maxWidth: '100vw',
+            left: '0 !important',
+            right: '0 !important',
+            marginBottom: 16,
+            position: 'fixed',
+          }}
+        >
+          <Dialog variant="menu" style={{ maxHeight: '60vh', overflowY: 'auto' }}>
+            <Grid columns="1fr" gap={1} style={{ padding: '8px 0' }}>
+              {items.map(({ value, label }) => (
+                <Button
+                  key={value}
+                  variant="quiet"
+                  onPress={() => handleSelect(value)}
+                  style={{
+                    padding: '16px 24px',
+                    justifyContent: 'flex-start',
+                    minHeight: '48px',
+                  }}
+                >
+                  <Text
+                    weight={value === locale ? 'bold' : 'medium'}
+                    color={value === locale ? undefined : 'muted'}
+                  >
+                    {label}
+                  </Text>
+                </Button>
+              ))}
+            </Grid>
+          </Dialog>
+        </Popover>
+      </MenuTrigger>
+      <ThemeButton />
+    </Row>
+  );
+}