fix: bugs

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>

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 && (

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

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