-
-
Notifications
You must be signed in to change notification settings - Fork 19
/
HeadersSidebar.tsx
56 lines (51 loc) · 1.29 KB
/
HeadersSidebar.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
import { Heading, Box, useColorModeValue, useColorMode, Link } from '@chakra-ui/react'
import { ActiveHeader } from '../lib/hooks/useActiveHeader'
export default function HeaderSidebars({ headers }: any) {
const { colorMode } = useColorMode()
const color = {
light: 'gray.600',
dark: 'gray.400'
}
const activeId = ActiveHeader(
headers.map(({ text }: any) => `[id="${text}"]`),
{
rootMargin: '0% 0% -24% 0%'
}
)
type OptionProps = {
root: any
rootMargin: string
threshold: number
}
return (
<Box px={2}>
<Heading
as="h1"
size="sm"
letterSpacing="tight"
mt={8}
mb={2}
color={useColorModeValue('gray.700', 'gray.300')}
>
On This Page
</Heading>
{headers?.map((h: any, index: number) => {
return (
<Link href={`#${h.text}`} key={index} _hover={{ textDecor: 'none' }}>
<Heading
as="h4"
fontSize="16px"
fontWeight={activeId === h.text ? 'bold' : 'normal'}
color={color[colorMode]}
my={2}
ml={(h.level - 2) * 6}
_hover={{ opacity: 0.8 }}
>
{h.text}
</Heading>
</Link>
)
})}
</Box>
)
}