@cryptotaxi247 / documentation-1
Code Commits Issues Pulls Sessions CI/CD
reggi/dev-engines
@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 58 lines 1.35 KB
Raw
1 import {Box} from '@primer/react'
2 import React from 'react'
3 import NavItems from './nav-items'
4 import {FULL_HEADER_HEIGHT} from '../constants'
5
6 function usePersistentScroll(id) {
7 const ref = React.useRef()
8
9 const handleScroll = React.useCallback(
10 // Save scroll position in session storage on every scroll change
11 event => window.sessionStorage.setItem(id, event.target.scrollTop),
12 [id],
13 )
14
15 React.useLayoutEffect(() => {
16 // Restore scroll position when component mounts
17 const scrollPosition = window.sessionStorage.getItem(id)
18 if (scrollPosition && ref.current) {
19 ref.current.scrollTop = scrollPosition
20 }
21 }, [id])
22
23 // Return props to spread onto the scroll container
24 return {
25 ref,
26 onScroll: handleScroll,
27 }
28 }
29
30 const Sidebar = () => (
31 <Box
32 role="navigation"
33 sx={{
34 position: 'sticky',
35 top: `${FULL_HEADER_HEIGHT}px`,
36 height: `calc(100vh - ${FULL_HEADER_HEIGHT}px)`,
37 width: 270,
38 }}
39 >
40 <Box
41 {...usePersistentScroll('sidebar')}
42 sx={{
43 overflow: 'auto',
44 borderWidth: 0,
45 borderRightWidth: 1,
46 height: '100%',
47 borderStyle: 'solid',
48 borderColor: 'border.subtle',
49 }}
50 >
51 <Box sx={{display: 'flex', flexDirection: 'column'}} role="list">
52 <NavItems />
53 </Box>
54 </Box>
55 </Box>
56 )
57
58 export default Sidebar