Add drag container for web library headers (#206)

src/renderer/components/page-header/index.tsx

@@ -79,6 +79,24 @@ const TitleWrapper = styled(motion.div)`
     height: 100%;
 `;
 
+const DragContainer = styled.div`
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: calc(100% - 130px);
+    height: 65px;
+    -webkit-app-region: drag;
+
+    button {
+        -webkit-app-region: no-drag;
+    }
+
+    input {
+        -webkit-app-region: no-drag;
+    }
+`;
+
 const variants: Variants = {
     animate: {
         opacity: 1,
@@ -106,6 +124,9 @@ export const PageHeader = ({
     const theme = useTheme();
 
     return (
+        <>
+            {windowBarStyle === Platform.WEB && <DragContainer />}
+            {!isHidden && (
                 <Container
                     ref={ref}
                     height={height}
@@ -135,5 +156,7 @@ export const PageHeader = ({
                         </>
                     )}
                 </Container>
+            )}
+        </>
     );
 };

src/renderer/components/scroll-area/index.tsx

@@ -125,14 +125,12 @@ export const NativeScrollArea = forwardRef(
 
         return (
             <>
-                {shouldShowHeader && (
                 <PageHeader
                     animated
-                        isHidden={false}
+                    isHidden={!shouldShowHeader}
                     position="absolute"
                     {...pageHeaderProps}
                 />
-                )}
                 <StyledNativeScrollArea
                     ref={mergedRef}
                     scrollBarOffset={scrollBarOffset}