feat: add single column layout toggle option

src/PageManager.tsx

@@ -29,6 +29,7 @@ import SearchPage from './pages/primary/SearchPage'
 import { NotificationProvider } from './providers/NotificationProvider'
 import { useScreenSize } from './providers/ScreenSizeProvider'
 import { useTheme } from './providers/ThemeProvider'
+import { useUserPreferences } from './providers/UserPreferencesProvider'
 import { routes } from './routes'
 import modalManager from './services/modal-manager.service'
 
@@ -106,6 +107,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
   const [secondaryStack, setSecondaryStack] = useState<TStackItem[]>([])
   const { isSmallScreen } = useScreenSize()
   const { themeSetting } = useTheme()
+  const { enableSingleColumnLayout } = useUserPreferences()
   const ignorePopStateRef = useRef(false)
 
   useEffect(() => {
@@ -243,7 +245,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
     if (needScrollToTop) {
       PRIMARY_PAGE_REF_MAP[page].current?.scrollToTop('smooth')
     }
-    if (isSmallScreen) {
+    if (isSmallScreen || enableSingleColumnLayout) {
       clearSecondaryPages()
     }
   }
@@ -333,6 +335,79 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
     )
   }
 
+  if (enableSingleColumnLayout) {
+    return (
+      <PrimaryPageContext.Provider
+        value={{
+          navigate: navigatePrimaryPage,
+          current: currentPrimaryPage,
+          display: secondaryStack.length === 0
+        }}
+      >
+        <SecondaryPageContext.Provider
+          value={{
+            push: pushSecondaryPage,
+            pop: popSecondaryPage,
+            currentIndex: secondaryStack.length
+              ? secondaryStack[secondaryStack.length - 1].index
+              : 0
+          }}
+        >
+          <CurrentRelaysProvider>
+            <NotificationProvider>
+              <div className="flex flex-col items-center bg-surface-background">
+                <div
+                  className="flex h-[var(--vh)] w-full bg-surface-background"
+                  style={{
+                    maxWidth: '1920px'
+                  }}
+                >
+                  <div className="grid grid-cols-10 w-full">
+                    <div className="col-span-3 flex justify-end">
+                      <Sidebar />
+                    </div>
+                    <div className="col-span-4 bg-background overflow-hidden border-x">
+                      {!!secondaryStack.length &&
+                        secondaryStack.map((item, index) => (
+                          <div
+                            key={item.index}
+                            className="flex flex-col h-full w-full"
+                            style={{
+                              display: index === secondaryStack.length - 1 ? 'block' : 'none'
+                            }}
+                          >
+                            {item.component}
+                          </div>
+                        ))}
+                      {primaryPages.map(({ name, element, props }) => (
+                        <div
+                          key={name}
+                          className="flex flex-col h-full w-full"
+                          style={{
+                            display:
+                              secondaryStack.length === 0 && currentPrimaryPage === name
+                                ? 'block'
+                                : 'none'
+                          }}
+                        >
+                          {props ? cloneElement(element as React.ReactElement, props) : element}
+                        </div>
+                      ))}
+                    </div>
+                    <div className="col-span-3" />
+                  </div>
+                </div>
+              </div>
+              <TooManyRelaysAlertDialog />
+              <CreateWalletGuideToast />
+              <BackgroundAudio className="fixed bottom-20 right-0 z-50 w-80 rounded-l-full rounded-r-none overflow-hidden shadow-lg border" />
+            </NotificationProvider>
+          </CurrentRelaysProvider>
+        </SecondaryPageContext.Provider>
+      </PrimaryPageContext.Provider>
+    )
+  }
+
   return (
     <PrimaryPageContext.Provider
       value={{