Use full header height instead of header height
Luke Karrys committed
Oct 17, 2023 at 15:46 UTC
4b2339744bbd4a57e6006d26761da6fc9b564f43
6 files changed
+13
-11
src/components/header.js
+1
-1
@@ -43,7 +43,7 @@ function Header() {
43
as="header"
44
sx={{
45
display: 'flex',
46
- height: HEADER_HEIGHT - HEADER_BAR,
46
+ height: HEADER_HEIGHT,
47
px: [3, null, null, 4],
48
alignItems: 'center',
49
justifyContent: 'space-between',
src/components/mobile-search.js
+1
-1
@@ -51,7 +51,7 @@ function MobileSearch({onDismiss, ...props}) {
51
display: 'flex',
52
bg: 'canvas.default',
53
color: 'fg.default',
54
- height: `${HEADER_HEIGHT - HEADER_BAR}px`,
54
+ height: `${HEADER_HEIGHT}px`,
55
flex: '0 0 auto',
56
px: 3,
57
alignItems: 'center',
src/components/sidebar.js
+3
-3
@@ -1,7 +1,7 @@
1
import {Box} from '@primer/react'
2
import React from 'react'
3
import NavItems from './nav-items'
4
-import {HEADER_HEIGHT} from '../constants'
4
+import {FULL_HEADER_HEIGHT} from '../constants'
5
6
function usePersistentScroll(id) {
7
const ref = React.useRef()
@@ -32,8 +32,8 @@ const Sidebar = () => (
32
role="navigation"
33
sx={{
34
position: 'sticky',
35
- top: `${HEADER_HEIGHT}px`,
36
- height: `calc(100vh - ${HEADER_HEIGHT}px)`,
35
+ top: `${FULL_HEADER_HEIGHT}px`,
36
+ height: `calc(100vh - ${FULL_HEADER_HEIGHT}px)`,
37
width: 270,
38
}}
39
>
src/components/table-of-contents.js
+3
-3
@@ -3,7 +3,7 @@ import {Heading, Box, Details, useDetails, Button} from '@primer/react'
3
import {ChevronDownIcon, ChevronRightIcon} from '@primer/octicons-react'
4
import {usePageContext} from '../layout'
5
import {NavList} from '@primer/react/drafts'
6
-import {HEADER_HEIGHT} from '../constants'
6
+import {FULL_HEADER_HEIGHT} from '../constants'
7
8
const TableOfContentsItems = ({items, depth}) => (
9
<>
@@ -54,8 +54,8 @@ export const Desktop = withTableOfContents(({items}) => (
54
marginLeft: [null, 7, 8, 9],
55
display: ['none', null, 'block'],
56
position: 'sticky',
57
- top: HEADER_HEIGHT + 48,
58
- maxHeight: `calc(100vh - ${HEADER_HEIGHT + 48}px)`,
57
+ top: FULL_HEADER_HEIGHT + 48,
58
+ maxHeight: `calc(100vh - ${FULL_HEADER_HEIGHT + 48}px)`,
59
}}
60
>
61
<Heading as="h3" sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold'}} id="toc-heading">
src/constants.js
+3
-1
@@ -1,7 +1,9 @@
1
-export const HEADER_HEIGHT = 66
1
+export const HEADER_HEIGHT = 56
2
3
export const HEADER_BAR = 10
4
5
+export const FULL_HEADER_HEIGHT = HEADER_HEIGHT + HEADER_BAR
6
+
7
export const SKIP_NAV = {id: 'skip-nav', as: 'main'}
8
9
export const NPM_RED = '#cb0000'
src/mdx/index.js
+2
-2
@@ -6,7 +6,7 @@ import {withPrefix} from 'gatsby'
6
import {LinkIcon} from '@primer/octicons-react'
7
import textContent from 'react-addons-text-content'
8
import {useSlugger} from '../layout'
9
-import {HEADER_HEIGHT} from '../constants'
9
+import {FULL_HEADER_HEIGHT} from '../constants'
10
11
export {default as Code} from './code'
12
export {default as Index} from './nav-hierarchy'
@@ -25,7 +25,7 @@ export const Pre = ({children}) => children
25
const StyledHeading = styled(Heading)`
26
margin-top: ${themeGet('space.4')};
27
margin-bottom: ${themeGet('space.3')};
28
- scroll-margin-top: ${HEADER_HEIGHT + 24}px;
28
+ scroll-margin-top: ${FULL_HEADER_HEIGHT + 24}px;
29
line-height: ${themeGet('lineHeights.condensed')};
30
31
@media (hover: hover) {