@cryptotaxi247 / documentation
Code Commits Issues Pulls Sessions CI/CD
maitxn/version-bump-tar
@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 52 lines 1.54 KB
Raw
1 import React from 'react'
2 import styled from 'styled-components'
3 import * as Search from './search'
4 import NavDrawer from './nav-drawer'
5 import Link from './link'
6 import useSearch from '../hooks/use-search'
7 import {HEADER_BAR, Z_INDEX} from '../constants'
8 import headerNavItems from '../../content/header-nav.yml'
9 import {DarkTheme} from '../theme'
10 import SiteTitle from './site-title'
11
12 import * as styles from './header.module.css'
13
14 const NpmHeaderBar = styled.div`
15 height: ${HEADER_BAR}px;
16 background-image: linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff);
17 `
18
19 function Header() {
20 const search = useSearch()
21
22 return (
23 <div className={styles.stickyHeader} style={{zIndex: Z_INDEX.HEADER}}>
24 <DarkTheme>
25 <NpmHeaderBar />
26 <header className={styles.headerBox}>
27 <div className={styles.Box}>
28 <SiteTitle logo={true} className={styles.SiteTitle} />
29 <div className={styles.searchDesktop}>
30 <Search.Desktop {...search} />
31 </div>
32 </div>
33 <div className={styles.Box_1}>
34 <div className={styles.navDesktop}>
35 {headerNavItems.map((item, index) => (
36 <Link key={index} href={item.url} className={styles.Link}>
37 {item.title}
38 </Link>
39 ))}
40 </div>
41 <div className={styles.navMobile}>
42 <Search.Mobile {...search} />
43 <NavDrawer />
44 </div>
45 </div>
46 </header>
47 </DarkTheme>
48 </div>
49 )
50 }
51
52 export default Header