/
page.tsx
120 lines (113 loc) · 3.16 KB
/
page.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import { AppShell, Box, Transition, useMantineTheme } from '@mantine/core'
import { useMediaQuery } from '@mantine/hooks'
import { useEffect, useState } from 'react'
import { Aside, AsideDrawer, Fab, Header, Navbar } from '~/components'
import type { PageProps } from './page.types'
export function Page(props: PageProps): JSX.Element {
const {
children,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
actions,
aside,
bottomNavigation,
fab,
goBackTo,
header,
padding,
showBackButton = false,
subNavigation,
title,
toolbarButtons,
transition = 'fade'
} = props
const theme = useMantineTheme()
const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm}px)`)
const [opened, setOpened] = useState(false)
const [isCollapsed, setIsCollapsed] = useState(true)
const [mounted, setMounted] = useState(false)
useEffect(() => {
setMounted(true)
}, [])
return (
<>
<AppShell
padding={padding}
styles={{
main: {
background:
theme.colorScheme === 'dark'
? theme.colors.dark[8]
: theme.colors.gray[0]
}
}}
asideOffsetBreakpoint='sm'
aside={aside && <Aside title={aside.title}>{aside.component}</Aside>}
footer={isMobile ? bottomNavigation : undefined}
header={
isMobile ? (
<div>
<Header
mobileTitle={title}
opened={opened}
setOpened={setOpened}
goBackTo={goBackTo}
showBackButton={showBackButton}
rightButtons={toolbarButtons}
/>
{header}
</div>
) : undefined
}
navbarOffsetBreakpoint='sm'
navbar={
<Navbar
isMobile={isMobile}
collapsed={isCollapsed}
toggleCollapsed={() => setIsCollapsed(!isCollapsed)}
subNavigation={subNavigation}
opened={opened}
/>
}
>
{!isMobile && (
<Box
sx={{
backgroundColor:
theme.colorScheme === 'dark'
? theme.colors.dark[7]
: theme.white,
borderBottom: `1px solid ${
theme.colorScheme === 'dark'
? theme.colors.dark[7]
: theme.colors.gray[3]
}`,
marginBottom: theme.spacing.xl,
padding: theme.spacing.md,
paddingTop: 18,
height: 60
}}
/>
)}
{fab && (
<Fab
onClick={fab.onClick}
offset={fab.offset}
link={fab.to}
icon={fab.icon}
/>
)}
<Transition
mounted={mounted}
transition={transition || 'fade'}
duration={400}
timingFunction='ease'
>
{styles => <Box style={styles}>{children}</Box>}
</Transition>
</AppShell>
{isMobile && aside && (
<AsideDrawer title={aside.title}>{aside.component}</AsideDrawer>
)}
</>
)
}