@cryptotaxi247 / documentation
Code Commits Issues Pulls Sessions CI/CD
deprecate-totp-2fa
@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 63 lines 1.92 KB
Raw
1 import React from 'react'
2 import {Box} from '@primer/react'
3 import styled from 'styled-components'
4 import * as Search from './search'
5 import NavDrawer from './nav-drawer'
6 import Link from './link'
7 import useSearch from '../hooks/use-search'
8 import {HEADER_HEIGHT, HEADER_BAR, Z_INDEX} from '../constants'
9 import headerNavItems from '../../content/header-nav.yml'
10 import {DarkTheme} from '../theme'
11 import SiteTitle from './site-title'
12
13 const NpmHeaderBar = styled(Box)`
14 height: ${HEADER_BAR}px;
15 background-image: linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff);
16 `
17
18 function Header() {
19 const search = useSearch()
20
21 return (
22 <DarkTheme sx={{top: 0, position: 'sticky', zIndex: Z_INDEX.HEADER}}>
23 <NpmHeaderBar />
24 <Box
25 as="header"
26 sx={{
27 display: 'flex',
28 height: `${HEADER_HEIGHT}px`,
29 px: [3, null, null, 4],
30 alignItems: 'center',
31 justifyContent: 'space-between',
32 bg: 'canvas.default',
33 border: '1px solid',
34 borderLeftWidth: 0,
35 borderRightWidth: 0,
36 borderColor: 'border.muted',
37 }}
38 >
39 <Box sx={{display: 'flex', alignItems: 'center'}}>
40 <SiteTitle logo={true} sx={{mr: 4}} />
41 <Box sx={{display: ['none', null, null, 'block'], ml: 4}}>
42 <Search.Desktop {...search} />
43 </Box>
44 </Box>
45 <Box sx={{display: 'flex'}}>
46 <Box sx={{display: ['none', null, null, 'flex'], alignItems: 'center'}}>
47 {headerNavItems.map((item, index) => (
48 <Link key={index} href={item.url} sx={{display: 'block', ml: 4, color: 'fg.default'}}>
49 {item.title}
50 </Link>
51 ))}
52 </Box>
53 <Box sx={{display: ['flex', null, null, 'none']}}>
54 <Search.Mobile {...search} />
55 <NavDrawer />
56 </Box>
57 </Box>
58 </Box>
59 </DarkTheme>
60 )
61 }
62
63 export default Header