@cryptotaxi247 / documentation-1
Code Commits Issues Pulls Sessions CI/CD
jpg619/version-bump-tar-2
@reggi/path-to-regexp dependabot/npm_and_yarn/main/copy-to-clipboard-4.0.2 dependabot/npm_and_yarn/main/eslint-10.4.0 dependabot/npm_and_yarn/main/npmcli/eslint-config-7.0.0 dependabot/npm_and_yarn/main/proc-log-7.0.0 dependabot/npm_and_yarn/npm_and_yarn-826852524d dependabot/npm_and_yarn/npm_and_yarn-ab9a7f4bc2 deprecate-totp-2fa dhei/classic-tokens gat-bypass-2fa-docs jpg619/fix-accessibility-content-flow jpg619/version-bump-tar-2 kartykp/gat-bypass-2fa-docs kartykp/upgrade-path-to-regex main maitxn/version-bump-tar patch-1 reggi/cache-based-on-version reggi/dev-engines reggi/fix-transform-prettier reggi/overrides update-search-sensitivity
js 47 lines 1.12 KB
Raw
1 import React from 'react'
2 import NavItems from './nav-items'
3 import {FULL_HEADER_HEIGHT} from '../constants'
4
5 import * as styles from './sidebar.module.css'
6
7 function usePersistentScroll(id) {
8 const ref = React.useRef()
9
10 const handleScroll = React.useCallback(
11 // Save scroll position in session storage on every scroll change
12 event => window.sessionStorage.setItem(id, event.target.scrollTop),
13 [id],
14 )
15
16 React.useLayoutEffect(() => {
17 // Restore scroll position when component mounts
18 const scrollPosition = window.sessionStorage.getItem(id)
19 if (scrollPosition && ref.current) {
20 ref.current.scrollTop = scrollPosition
21 }
22 }, [id])
23
24 // Return props to spread onto the scroll container
25 return {
26 ref,
27 onScroll: handleScroll,
28 }
29 }
30
31 const Sidebar = () => (
32 <nav
33 style={{
34 top: `${FULL_HEADER_HEIGHT}px`,
35 height: `calc(100vh - ${FULL_HEADER_HEIGHT}px)`,
36 }}
37 className={styles.Box}
38 >
39 <div {...usePersistentScroll('sidebar')} className={styles.Box_1}>
40 <div className={styles.Box_2}>
41 <NavItems />
42 </div>
43 </div>
44 </nav>
45 )
46
47 export default Sidebar