From e788e01c6d04726dbefb94886ddab318e1894630 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Wed, 22 Nov 2023 15:02:45 +0200
Subject: [PATCH] sticky header in mobile size

---
 packages/app/src/Pages/Layout/index.tsx | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/app/src/Pages/Layout/index.tsx b/packages/app/src/Pages/Layout/index.tsx
index e1382465..08d0b8e4 100644
--- a/packages/app/src/Pages/Layout/index.tsx
+++ b/packages/app/src/Pages/Layout/index.tsx
@@ -56,9 +56,12 @@ export default function Index() {
   return (
     <div className="h-screen flex justify-center">
       <div className={`${pageClass} w-full max-w-screen-xl overflow-x-hidden`}>
+        {!shouldHideHeader && <Header />}
         <div className="flex flex-row w-full">
           <NavSidebar className="w-1/4 flex-shrink-0" />
-          <MainContent shouldHideHeader={shouldHideHeader} />
+          <div className="flex flex-1 flex-col overflow-x-hidden">
+            <Outlet />
+          </div>
           <RightColumn className="w-1/4 flex-shrink-0" />
         </div>
         <div className="md:hidden">
@@ -72,18 +75,9 @@ export default function Index() {
   );
 }
 
-function MainContent({ shouldHideHeader }) {
-  return (
-    <div className="flex flex-1 flex-col overflow-x-hidden">
-      {!shouldHideHeader && <Header />}
-      <Outlet />
-    </div>
-  );
-}
-
 function Header() {
   return (
-    <header className="sticky top-0 md:hidden">
+    <header className="sticky top-0 md:hidden z-10 backdrop-blur-lg">
       <LogoHeader />
       <AccountHeader />
     </header>