Add drag container for web library headers (#206)

This commit is contained in:
jeffvli 2023-09-21 18:46:47 -07:00
parent c4f9868a6b
commit fd7468a4fe
2 changed files with 56 additions and 35 deletions

View file

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

View file

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