From c429306e77780d8337b2e0455a4aaa1f87275419 Mon Sep 17 00:00:00 2001
From: lethemanh <themanhle1234@gmail.com>
Date: Wed, 29 Apr 2026 22:38:47 +0700
Subject: [PATCH] #843 missing back button in settings on mobile (#849)

Co-authored-by: lethemanh <lethemanh@lethemanhs-MacBook-Pro.local>
---
 src/components/Calendar/CalendarLayout.tsx |  4 +-
 src/features/Settings/SettingsPage.tsx     | 96 ++++++++++++----------
 2 files changed, 57 insertions(+), 43 deletions(-)

diff --git a/src/components/Calendar/CalendarLayout.tsx b/src/components/Calendar/CalendarLayout.tsx
index d1d3482..992023d 100644
--- a/src/components/Calendar/CalendarLayout.tsx
+++ b/src/components/Calendar/CalendarLayout.tsx
@@ -121,7 +121,9 @@ export default function CalendarLayout(): JSX.Element {
           currentView={currentView}
         />
       )}
-      {view === 'settings' && <SettingsPage isInIframe={isInIframe} />}
+      {view === 'settings' && (
+        <SettingsPage menubarProps={menubarProps} isInIframe={isInIframe} />
+      )}
       <ErrorSnackbar error={error} type="calendar" />
     </div>
   )
diff --git a/src/features/Settings/SettingsPage.tsx b/src/features/Settings/SettingsPage.tsx
index 6a21451..9bdc475 100644
--- a/src/features/Settings/SettingsPage.tsx
+++ b/src/features/Settings/SettingsPage.tsx
@@ -4,11 +4,15 @@ import { useScreenSizeDetection } from '@/useScreenSizeDetection'
 import { SettingErrorSnackbars } from './SettingErrorSnackbars'
 import { DesktopSettingsPage } from './DesktopSettingsPage'
 import { MobileSettingsPage } from './MobileSettingsPage'
+import { Menubar, type MenubarProps } from '@/components/Menubar/Menubar'
 
 export type SidebarNavItem = 'settings' | 'sync'
 export type SettingsSubTab = 'settings' | 'notifications'
 
-const SettingsPage: React.FC<{ isInIframe?: boolean }> = ({ isInIframe }) => {
+const SettingsPage: React.FC<{
+  menubarProps?: MenubarProps
+  isInIframe?: boolean
+}> = ({ menubarProps, isInIframe }) => {
   const { isTooSmall: isMobile } = useScreenSizeDetection()
 
   const [activeSettingsSubTab, setActiveSettingsSubTab] =
@@ -46,49 +50,57 @@ const SettingsPage: React.FC<{ isInIframe?: boolean }> = ({ isInIframe }) => {
   }
 
   return (
-    <main
-      className={`main-layout settings-layout${isInIframe ? ' isInIframe' : ''} ${isMobile ? 'settings-layout--mobile' : ''}`}
-    >
-      {isMobile ? (
-        <MobileSettingsPage
-          activeSettingsSubTab={activeSettingsSubTab}
-          setLanguageErrorOpen={setLanguageErrorOpen}
-          setTimeZoneErrorOpen={setTimeZoneErrorOpen}
-          setAlarmEmailsErrorOpen={setAlarmEmailsErrorOpen}
-          setHideDeclinedEventsErrorOpen={setHideDeclinedEventsErrorOpen}
-          setDisplayWeekNumbersErrorOpen={setDisplayWeekNumbersErrorOpen}
+    <>
+      {isInIframe && isMobile && menubarProps && <Menubar {...menubarProps} />}
+
+      <main
+        className={`main-layout settings-layout${isInIframe ? ' isInIframe' : ''} ${isMobile ? 'settings-layout--mobile' : ''}`}
+      >
+        {isMobile ? (
+          <MobileSettingsPage
+            activeSettingsSubTab={activeSettingsSubTab}
+            setLanguageErrorOpen={setLanguageErrorOpen}
+            setTimeZoneErrorOpen={setTimeZoneErrorOpen}
+            setAlarmEmailsErrorOpen={setAlarmEmailsErrorOpen}
+            setHideDeclinedEventsErrorOpen={setHideDeclinedEventsErrorOpen}
+            setDisplayWeekNumbersErrorOpen={setDisplayWeekNumbersErrorOpen}
+            setWorkingDaysErrorOpen={setWorkingDaysErrorOpen}
+            handleSettingsSubTabChange={handleSettingsSubTabChange}
+            setActiveSettingsSubTab={setActiveSettingsSubTab}
+          />
+        ) : (
+          <DesktopSettingsPage
+            activeSettingsSubTab={activeSettingsSubTab}
+            setLanguageErrorOpen={setLanguageErrorOpen}
+            setTimeZoneErrorOpen={setTimeZoneErrorOpen}
+            setAlarmEmailsErrorOpen={setAlarmEmailsErrorOpen}
+            setHideDeclinedEventsErrorOpen={setHideDeclinedEventsErrorOpen}
+            setDisplayWeekNumbersErrorOpen={setDisplayWeekNumbersErrorOpen}
+            setWorkingDaysErrorOpen={setWorkingDaysErrorOpen}
+            handleSettingsSubTabChange={handleSettingsSubTabChange}
+            setActiveSettingsSubTab={setActiveSettingsSubTab}
+          />
+        )}
+        <SettingErrorSnackbars
+          languageErrorOpen={languageErrorOpen}
+          timeZoneErrorOpen={timeZoneErrorOpen}
+          alarmEmailsErrorOpen={alarmEmailsErrorOpen}
+          hideDeclinedEventsErrorOpen={hideDeclinedEventsErrorOpen}
+          displayWeekNumbersErrorOpen={displayWeekNumbersErrorOpen}
+          workingDaysErrorOpen={workingDaysErrorOpen}
+          handleLanguageErrorClose={handleLanguageErrorClose}
+          handleTimeZoneErrorClose={handleTimeZoneErrorClose}
+          handleAlarmEmailsErrorClose={handleAlarmEmailsErrorClose}
+          handleHideDeclinedEventsErrorClose={
+            handleHideDeclinedEventsErrorClose
+          }
+          handleDisplayWeekNumbersErrorClose={
+            handleDisplayWeekNumbersErrorClose
+          }
           setWorkingDaysErrorOpen={setWorkingDaysErrorOpen}
-          handleSettingsSubTabChange={handleSettingsSubTabChange}
-          setActiveSettingsSubTab={setActiveSettingsSubTab}
         />
-      ) : (
-        <DesktopSettingsPage
-          activeSettingsSubTab={activeSettingsSubTab}
-          setLanguageErrorOpen={setLanguageErrorOpen}
-          setTimeZoneErrorOpen={setTimeZoneErrorOpen}
-          setAlarmEmailsErrorOpen={setAlarmEmailsErrorOpen}
-          setHideDeclinedEventsErrorOpen={setHideDeclinedEventsErrorOpen}
-          setDisplayWeekNumbersErrorOpen={setDisplayWeekNumbersErrorOpen}
-          setWorkingDaysErrorOpen={setWorkingDaysErrorOpen}
-          handleSettingsSubTabChange={handleSettingsSubTabChange}
-          setActiveSettingsSubTab={setActiveSettingsSubTab}
-        />
-      )}
-      <SettingErrorSnackbars
-        languageErrorOpen={languageErrorOpen}
-        timeZoneErrorOpen={timeZoneErrorOpen}
-        alarmEmailsErrorOpen={alarmEmailsErrorOpen}
-        hideDeclinedEventsErrorOpen={hideDeclinedEventsErrorOpen}
-        displayWeekNumbersErrorOpen={displayWeekNumbersErrorOpen}
-        workingDaysErrorOpen={workingDaysErrorOpen}
-        handleLanguageErrorClose={handleLanguageErrorClose}
-        handleTimeZoneErrorClose={handleTimeZoneErrorClose}
-        handleAlarmEmailsErrorClose={handleAlarmEmailsErrorClose}
-        handleHideDeclinedEventsErrorClose={handleHideDeclinedEventsErrorClose}
-        handleDisplayWeekNumbersErrorClose={handleDisplayWeekNumbersErrorClose}
-        setWorkingDaysErrorOpen={setWorkingDaysErrorOpen}
-      />
-    </main>
+      </main>
+    </>
   )
 }