96 lines
2.4 KiB
TypeScript
96 lines
2.4 KiB
TypeScript
import { Flex, FlexProps } from '@mantine/core';
|
|
import { motion } from 'framer-motion';
|
|
import { useEffect, useRef } from 'react';
|
|
import styled from 'styled-components';
|
|
import { useShouldPadTitlebar } from '/@/renderer/hooks';
|
|
|
|
const Container = styled(motion(Flex))<{ $isHidden?: boolean; height?: string; position?: string }>`
|
|
position: ${(props) => props.position || 'relative'};
|
|
z-index: 2000;
|
|
width: 100%;
|
|
height: ${(props) => props.height || '60px'};
|
|
opacity: ${(props) => (props.$isHidden ? 0 : 1)};
|
|
transition: opacity 0.3s ease-in-out;
|
|
user-select: ${(props) => (props.$isHidden ? 'none' : 'auto')};
|
|
pointer-events: ${(props) => (props.$isHidden ? 'none' : 'auto')};
|
|
`;
|
|
|
|
const Header = styled(motion.div)<{ $padRight?: boolean }>`
|
|
position: relative;
|
|
z-index: 15;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-right: ${(props) => props.$padRight && '170px'};
|
|
-webkit-app-region: drag;
|
|
|
|
button {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
input {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
`;
|
|
|
|
const BackgroundImage = styled.div<{ background: string }>`
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: ${(props) => props.background || 'var(--titlebar-bg)'};
|
|
`;
|
|
|
|
const BackgroundImageOverlay = styled.div`
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 30%), var(--background-noise);
|
|
`;
|
|
|
|
interface PageHeaderProps
|
|
extends Omit<FlexProps, 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> {
|
|
backgroundColor?: string;
|
|
children?: React.ReactNode;
|
|
height?: string;
|
|
isHidden?: boolean;
|
|
position?: string;
|
|
}
|
|
|
|
export const PageHeader = ({
|
|
position,
|
|
height,
|
|
backgroundColor,
|
|
isHidden,
|
|
children,
|
|
...props
|
|
}: PageHeaderProps) => {
|
|
const ref = useRef(null);
|
|
const padRight = useShouldPadTitlebar();
|
|
|
|
useEffect(() => {
|
|
const rootElement = document.querySelector(':root') as HTMLElement;
|
|
rootElement?.style?.setProperty('--header-opacity', '0');
|
|
}, []);
|
|
|
|
return (
|
|
<Container
|
|
ref={ref}
|
|
$isHidden={isHidden}
|
|
height={height}
|
|
position={position}
|
|
{...props}
|
|
>
|
|
<Header $padRight={padRight}>{!isHidden && <>{children}</>}</Header>
|
|
{backgroundColor && (
|
|
<>
|
|
<BackgroundImage background={'var(--titlebar-bg)' || ''} />
|
|
<BackgroundImageOverlay />
|
|
</>
|
|
)}
|
|
</Container>
|
|
);
|
|
};
|