fixed mobile navigation

src/pages/secondary/GeneralSettingsPage/index.tsx

@@ -6,6 +6,7 @@ import { LocalizedLanguageNames, TLanguage } from '@/i18n'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { cn, isSupportCheckConnectionType } from '@/lib/utils'
 import { useContentPolicy } from '@/providers/ContentPolicyProvider'
+import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { useTheme } from '@/providers/ThemeProvider'
 import { useUserPreferences } from '@/providers/UserPreferencesProvider'
 import { useUserTrust } from '@/providers/UserTrustProvider'
@@ -19,6 +20,7 @@ const GeneralSettingsPage = forwardRef(({ index, hideTitlebar = false }: { index
   const { t, i18n } = useTranslation()
   const [language, setLanguage] = useState<TLanguage>(i18n.language as TLanguage)
   const { themeSetting, setThemeSetting } = useTheme()
+  const { isSmallScreen } = useScreenSize()
   const {
     autoplay,
     setAutoplay,
@@ -151,19 +153,21 @@ const GeneralSettingsPage = forwardRef(({ index, hideTitlebar = false }: { index
           </Label>
           <Switch id="show-nsfw" checked={defaultShowNsfw} onCheckedChange={setDefaultShowNsfw} />
         </SettingItem>
-        <SettingItem>
+        {!isSmallScreen && (
-          <Label htmlFor="show-recommended-relays" className="text-base font-normal">
+          <SettingItem>
-            <div>{t('Show recommended relays panel')}</div>
+            <Label htmlFor="show-recommended-relays" className="text-base font-normal">
-            <div className="text-muted-foreground">
+              <div>{t('Show recommended relays panel')}</div>
-              {t('Display the right-side panel with recommended relays on desktop')}
+              <div className="text-muted-foreground">
-            </div>
+                {t('Display the right-side panel with recommended relays on desktop')}
-          </Label>
+              </div>
-          <Switch 
+            </Label>
-            id="show-recommended-relays" 
+            <Switch 
-            checked={showRecommendedRelaysPanel} 
+              id="show-recommended-relays" 
-            onCheckedChange={updateShowRecommendedRelaysPanel} 
+              checked={showRecommendedRelaysPanel} 
-          />
+              onCheckedChange={updateShowRecommendedRelaysPanel} 
-        </SettingItem>
+            />
+          </SettingItem>
+        )}
         <SettingItem>
           <div>
             <a

src/providers/UserPreferencesProvider.tsx

@@ -1,6 +1,6 @@
 import storage from '@/services/local-storage.service'
 import { TNotificationStyle } from '@/types'
-import { createContext, useContext, useState } from 'react'
+import { createContext, useContext, useEffect, useState } from 'react'
 
 type TUserPreferencesContext = {
   notificationListStyle: TNotificationStyle
@@ -27,12 +27,33 @@ export function UserPreferencesProvider({ children }: { children: React.ReactNod
     storage.getShowRecommendedRelaysPanel()
   )
   
+  // Force showRecommendedRelaysPanel to true on mobile
+  useEffect(() => {
+    const handleResize = () => {
+      const isMobile = window.innerWidth <= 768
+      if (isMobile && !showRecommendedRelaysPanel) {
+        setShowRecommendedRelaysPanel(true)
+        storage.setShowRecommendedRelaysPanel(true)
+      }
+    }
+    
+    // Check on mount and on resize
+    handleResize()
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [showRecommendedRelaysPanel])
+
   const updateNotificationListStyle = (style: TNotificationStyle) => {
     setNotificationListStyle(style)
     storage.setNotificationListStyle(style)
   }
 
   const updateShowRecommendedRelaysPanel = (show: boolean) => {
+    // Don't allow turning off the panel on mobile
+    const isMobile = window.innerWidth <= 768
+    if (isMobile && !show) {
+      return
+    }
     setShowRecommendedRelaysPanel(show)
     storage.setShowRecommendedRelaysPanel(show)
   }