From a5193477bbca66b13b6d5fb0913357c31ede2f79 Mon Sep 17 00:00:00 2001
From: Kilu <lu@appflowy.io>
Date: Sat, 29 Jun 2024 20:50:27 +0800
Subject: [PATCH] fix: bugs

---
 .../src/components/publish/PublishView.tsx     | 18 ++++++++----------
 .../publish/header/PublishViewHeader.tsx       | 17 ++++-------------
 .../src/styles/variables/dark.variables.css    |  1 +
 .../src/styles/variables/light.variables.css   |  1 +
 4 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/frontend/appflowy_web_app/src/components/publish/PublishView.tsx b/frontend/appflowy_web_app/src/components/publish/PublishView.tsx
index 66ce0ee6d2..3b603cc417 100644
--- a/frontend/appflowy_web_app/src/components/publish/PublishView.tsx
+++ b/frontend/appflowy_web_app/src/components/publish/PublishView.tsx
@@ -65,25 +65,23 @@ export function PublishView({ namespace, publishName }: PublishViewProps) {
   return (
     <PublishProvider namespace={namespace} publishName={publishName}>
       <div className={'h-screen w-screen'}>
-        <PublishViewHeader
-          onOpenDrawer={() => {
-            setOpen(true);
-          }}
-          openDrawer={open}
-          drawerWidth={drawerWidth}
-        />
-        {open && <OutlineDrawer width={drawerWidth} open={open} onClose={() => setOpen(false)} />}
-
         <AFScroller
           overflowXHidden
           style={{
-            height: 'calc(100vh - 64px)',
             transform: open ? `translateX(${drawerWidth}px)` : 'none',
             width: open ? `calc(100% - ${drawerWidth}px)` : '100%',
             transition: 'width 0.2s ease-in-out, transform 0.2s ease-in-out',
           }}
           className={'appflowy-layout appflowy-scroll-container'}
         >
+          <PublishViewHeader
+            onOpenDrawer={() => {
+              setOpen(true);
+            }}
+            openDrawer={open}
+          />
+          {open && <OutlineDrawer width={drawerWidth} open={open} onClose={() => setOpen(false)} />}
+
           <CollabView doc={doc} />
         </AFScroller>
       </div>
diff --git a/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx b/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx
index 9ab7d76b46..dccafc7359 100644
--- a/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx
+++ b/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx
@@ -10,15 +10,7 @@ import { ReactComponent as Logo } from '@/assets/logo.svg';
 import MoreActions from './MoreActions';
 import { ReactComponent as SideOutlined } from '@/assets/side_outlined.svg';
 
-export function PublishViewHeader({
-  onOpenDrawer,
-  drawerWidth,
-  openDrawer,
-}: {
-  onOpenDrawer: () => void;
-  openDrawer: boolean;
-  drawerWidth: number;
-}) {
+export function PublishViewHeader({ onOpenDrawer, openDrawer }: { onOpenDrawer: () => void; openDrawer: boolean }) {
   const { t } = useTranslation();
   const viewMeta = usePublishContext()?.viewMeta;
   const crumbs = useMemo(() => {
@@ -63,11 +55,10 @@ export function PublishViewHeader({
   return (
     <div
       style={{
-        transform: openDrawer ? `translateX(${drawerWidth}px)` : 'none',
-        width: openDrawer ? `calc(100% - ${drawerWidth}px)` : '100%',
-        transition: 'width 0.2s ease-in-out, transform 0.2s ease-in-out',
+        backdropFilter: 'saturate(180%) blur(16px)',
+        background: 'var(--header)',
       }}
-      className={'appflowy-top-bar flex h-[48px] px-5'}
+      className={'appflowy-top-bar sticky top-0 z-10 flex h-[48px] px-5'}
     >
       <div className={'flex w-full items-center justify-between gap-2 overflow-hidden'}>
         {!openDrawer && (
diff --git a/frontend/appflowy_web_app/src/styles/variables/dark.variables.css b/frontend/appflowy_web_app/src/styles/variables/dark.variables.css
index f53e295a2c..373ef8ee79 100644
--- a/frontend/appflowy_web_app/src/styles/variables/dark.variables.css
+++ b/frontend/appflowy_web_app/src/styles/variables/dark.variables.css
@@ -55,4 +55,5 @@
     --gradient5: linear-gradient(56.2deg, #5749CA 0%, #BB4A97 100%);
     --gradient6: linear-gradient(180deg, #036FFA 0%, #00B8E5 100%);
     --gradient7: linear-gradient(38.2deg, #F0C6CF 0%, #DECCE2 40.4754%, #CAD3F9 100%);
+    --header: rgba(0, 0, 0, 0.7);
 }
\ No newline at end of file
diff --git a/frontend/appflowy_web_app/src/styles/variables/light.variables.css b/frontend/appflowy_web_app/src/styles/variables/light.variables.css
index 236e114d9a..613577ef71 100644
--- a/frontend/appflowy_web_app/src/styles/variables/light.variables.css
+++ b/frontend/appflowy_web_app/src/styles/variables/light.variables.css
@@ -58,4 +58,5 @@
     --gradient5: linear-gradient(56.2deg, #5749CA 0%, #BB4A97 100%);
     --gradient6: linear-gradient(180deg, #036FFA 0%, #00B8E5 100%);
     --gradient7: linear-gradient(38.2deg, #F0C6CF 0%, #DECCE2 40.4754%, #CAD3F9 100%);
+    --header: rgba(255, 255, 255, 0.8);
 }
\ No newline at end of file