Add drag container for web library headers (#206)
This commit is contained in:
parent
c4f9868a6b
commit
fd7468a4fe
2 changed files with 56 additions and 35 deletions
|
@ -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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -125,14 +125,12 @@ export const NativeScrollArea = forwardRef(
|
|||
|
||||
return (
|
||||
<>
|
||||
{shouldShowHeader && (
|
||||
<PageHeader
|
||||
animated
|
||||
isHidden={false}
|
||||
isHidden={!shouldShowHeader}
|
||||
position="absolute"
|
||||
{...pageHeaderProps}
|
||||
/>
|
||||
)}
|
||||
<StyledNativeScrollArea
|
||||
ref={mergedRef}
|
||||
scrollBarOffset={scrollBarOffset}
|
||||
|
|
Reference in a new issue