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
import React from 'react'
import { AnchorNav, AnchorNavItem } from '@dailykit/ui'
import { Element } from 'react-scroll'

export default {
   title: 'Anchor Navigation Menu'
}

export const Default = () => (
   <>
      <AnchorNav>
         <AnchorNavItem
            targetElement='element-1'
            label='item-1'
            containerId='containerElement'
         />
         <AnchorNavItem
            targetElement='element-2'
            label='item-2'
            containerId='containerElement'
         />
      </AnchorNav>

      <Element
         id='containerElement'
         style={{
            position: 'relative',
            height: '600px',
            overflowY: 'auto',
            overflowX: 'hidden',
            width: '100%'
         }}
      >
         <Element
            name='element-1'
            style={{
               height: '1000px'
            }}
         >
            <h1>Element -1 </h1>
         </Element>

         <Element
            name='element-2'
            style={{
               height: '1000px'
            }}
         >
            <h1>Element -2 </h1>
         </Element>
      </Element>
   </>
)