118 lines
5.1 KiB
TypeScript
118 lines
5.1 KiB
TypeScript
import { useState } from 'react'
|
|
import Link from 'next/link'
|
|
import cx from 'classnames'
|
|
import { useRouter } from 'next/router'
|
|
import { ChevronDownIcon, MarkGithubIcon, ThreeBarsIcon, XIcon } from '@primer/octicons-react'
|
|
import { ButtonOutline } from '@primer/components'
|
|
|
|
import { useMainContext } from './context/MainContext'
|
|
import { LanguagePicker } from './LanguagePicker'
|
|
import { HeaderNotifications } from 'components/HeaderNotifications'
|
|
import { MobileProductDropdown } from 'components/MobileProductDropdown'
|
|
import { useTranslation } from 'components/hooks/useTranslation'
|
|
import { HomepageVersionPicker } from 'components/landing/HomepageVersionPicker'
|
|
|
|
export const Header = () => {
|
|
const router = useRouter()
|
|
const { currentProduct, relativePath, currentLayoutName, error } = useMainContext()
|
|
const { t } = useTranslation(['header', 'homepage'])
|
|
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
|
const showVersionPicker =
|
|
relativePath === 'index.md' ||
|
|
currentLayoutName === 'product-landing' ||
|
|
currentLayoutName === 'product-sublanding'
|
|
|
|
return (
|
|
<div className="border-bottom color-border-secondary no-print">
|
|
{error !== '404' && <HeaderNotifications />}
|
|
|
|
<header className="container-xl px-3 px-md-6 pt-3 pb-2 position-relative d-flex flex-justify-between width-full">
|
|
<div
|
|
className="d-flex flex-items-center d-lg-none"
|
|
style={{ zIndex: 3 }}
|
|
id="github-logo-mobile"
|
|
role="banner"
|
|
>
|
|
<Link href={`/${router.locale}`}>
|
|
<a aria-hidden="true" tabIndex={-1}>
|
|
<MarkGithubIcon size={32} className="color-icon-primary" />
|
|
</a>
|
|
</Link>
|
|
|
|
<Link href={`/${router.locale}`}>
|
|
<a className="h4-mktg color-text-primary no-underline no-wrap pl-2">
|
|
{t('github_docs')}
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="width-full">
|
|
<div className="d-inline-block width-full d-md-flex" style={{ zIndex: 1 }}>
|
|
<div className="float-right d-md-none position-relative" style={{ zIndex: 3 }}>
|
|
<ButtonOutline css onClick={() => setIsMenuOpen(!isMenuOpen)} aria-label="Navigation Menu">
|
|
{isMenuOpen ? <XIcon size="small" /> : <ThreeBarsIcon size="small" />}
|
|
</ButtonOutline>
|
|
</div>
|
|
<div
|
|
style={{ zIndex: 2 }}
|
|
className={cx('nav-mobile-dropdown width-full', isMenuOpen && 'js-open')}
|
|
>
|
|
<div className="d-md-flex flex-justify-between flex-items-center">
|
|
<div className="py-2 py-md-0 d-md-inline-block">
|
|
<h4 className="text-mono f5 text-normal color-text-secondary d-md-none">
|
|
{t('explore_by_product')}
|
|
</h4>
|
|
<details className="dropdown-withArrow position-relative details details-reset d-md-none close-when-clicked-outside">
|
|
<summary
|
|
className="nav-desktop-productDropdownButton color-text-link py-2"
|
|
role="button"
|
|
aria-label="Toggle products list"
|
|
>
|
|
<div
|
|
id="current-product"
|
|
className="d-flex flex-items-center flex-justify-between"
|
|
style={{ paddingTop: 2 }}
|
|
>
|
|
{/* <!-- Product switcher - GitHub.com, Enterprise Server, etc -->
|
|
<!-- 404 and 500 error layouts are not real pages so we need to hardcode the name for those --> */}
|
|
{currentProduct.name}
|
|
<ChevronDownIcon size={24} className="arrow ml-md-1" />
|
|
</div>
|
|
</summary>
|
|
|
|
<MobileProductDropdown />
|
|
</details>
|
|
</div>
|
|
|
|
<div className="d-md-inline-block">
|
|
{/* <!-- Versions picker that only appears in the header on landing pages --> */}
|
|
{showVersionPicker && <HomepageVersionPicker />}
|
|
|
|
{/* <!-- Language picker - 'English', 'Japanese', etc --> */}
|
|
<div className="border-top border-md-top-0 py-2 py-md-0 d-md-inline-block">
|
|
<LanguagePicker />
|
|
</div>
|
|
|
|
{/* <!-- GitHub.com homepage and 404 page has a stylized search; Enterprise homepages do not --> */}
|
|
{relativePath !== 'index.md' && error !== '404'}
|
|
<div
|
|
className="pt-3 pt-md-0 d-md-inline-block ml-md-3 border-top border-md-top-0"
|
|
dangerouslySetInnerHTML={{
|
|
__html: `
|
|
<div id="search-input-container" aria-hidden="true"></div>
|
|
<div id="search-results-container"></div>
|
|
<div class="search-overlay-desktop"></div>
|
|
`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
)
|
|
}
|