nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
profile
/
containers
/
minimalProfileHeaderContainer
/
MinimalProfileHeaderContainer.tsx
1.4 kB
49 lines
1'use client';
2
3import { Box, Container } from '@mantine/core';
4import { useWindowScroll } from '@mantine/hooks';
5import MinimalProfileHeader from '../../components/profileHeader/MinimalProfileHeader';
6import { useNavbarContext } from '@/providers/navbar';
7import { useMediaQuery } from '@mantine/hooks';
8
9interface Props {
10 avatarUrl?: string;
11 name: string;
12 handle: string;
13}
14
15export default function MinimalProfileHeaderContainer(props: Props) {
16 const [{ y: yScroll }] = useWindowScroll();
17 const { desktopOpened } = useNavbarContext();
18 const isMobile = useMediaQuery('(max-width: 48em)', true);
19 const HEADER_REVEAL_SCROLL_THRESHOLD = 260;
20 const NAVBAR_WIDTH = 300;
21
22 const navbarOffset = !isMobile && desktopOpened ? NAVBAR_WIDTH : 0;
23
24 return (
25 <Box
26 style={{
27 position: 'fixed',
28 top: 0,
29 left: 0,
30 width: '100%',
31 zIndex: 2,
32 opacity: yScroll > HEADER_REVEAL_SCROLL_THRESHOLD ? 1 : 0,
33 pointerEvents:
34 yScroll > HEADER_REVEAL_SCROLL_THRESHOLD ? 'auto' : 'none',
35 transform: `translateX(${navbarOffset}px)`,
36 transition: 'opacity 300ms ease, transform 300ms ease',
37 backgroundColor: 'var(--mantine-color-body)',
38 }}
39 >
40 <Container p={0} size={'xl'}>
41 <MinimalProfileHeader
42 avatarUrl={props.avatarUrl}
43 name={props.name}
44 handle={props.handle}
45 />
46 </Container>
47 </Box>
48 );
49}