#843 missing back button in settings on mobile (#849)

Co-authored-by: lethemanh <lethemanh@lethemanhs-MacBook-Pro.local>

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>
   )

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' : ''}`}
+      {isInIframe && isMobile && menubarProps && <Menubar {...menubarProps} />}
-    >
+
-      {isMobile ? (
+      <main
-        <MobileSettingsPage
+        className={`main-layout settings-layout${isInIframe ? ' isInIframe' : ''} ${isMobile ? 'settings-layout--mobile' : ''}`}
-          activeSettingsSubTab={activeSettingsSubTab}
+      >
-          setLanguageErrorOpen={setLanguageErrorOpen}
+        {isMobile ? (
-          setTimeZoneErrorOpen={setTimeZoneErrorOpen}
+          <MobileSettingsPage
-          setAlarmEmailsErrorOpen={setAlarmEmailsErrorOpen}
+            activeSettingsSubTab={activeSettingsSubTab}
-          setHideDeclinedEventsErrorOpen={setHideDeclinedEventsErrorOpen}
+            setLanguageErrorOpen={setLanguageErrorOpen}
-          setDisplayWeekNumbersErrorOpen={setDisplayWeekNumbersErrorOpen}
+            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}
         />
-      ) : (
+      </main>
-        <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>
   )
 }