1
1
mirror of https://github.com/primer/css.git synced 2024-12-24 22:53:58 +03:00
css/docs/Header.js

59 lines
1.9 KiB
JavaScript
Raw Normal View History

import React from 'react'
import {withRouter} from 'next/router'
import Octicon, {MarkGithub} from '@githubprimer/octicons-react'
2018-12-05 08:46:36 +03:00
import {Text, Flex, Sticky, BorderBox, Box} from '@primer/components'
import BoxShadow from './BoxShadow'
2018-12-05 02:59:11 +03:00
import Link from './Link'
2018-12-05 08:46:36 +03:00
import NodeLink from './NodeLink'
const NavLink = withRouter(({is: Tag = NodeLink, href, router, ...rest}) => (
<Tag href={href} color="white" px={4} fontWeight={router.pathname === href ? 'bold' : null} {...rest} />
))
const HeaderText = props => <Text fontSize={2} {...props} />
const Header = props => (
<Sticky zIndex={100}>
<BoxShadow py={3} bg="gray.9" color="white" {...props}>
<Flex className="p-responsive" alignItems="center" justifyContent="space-between">
<Link href="/css" color="white" ml={3}>
2018-12-05 02:59:11 +03:00
<Flex alignItems="center" justifyContent="center">
<Octicon icon={MarkGithub} size="medium" />
<HeaderText ml={3}>Primer CSS</HeaderText>
2018-12-05 02:59:11 +03:00
</Flex>
</Link>
<Box display={['none', 'none', 'block']}>
<HeaderText>
<NavLink href="/css">Docs</NavLink>
<NavLink href="/css/getting-started" />
<NavLink href="/css/principles" />
<NavLink href="/css/tools" />
<NavLink is={Link} href="https://github.com/primer/primer/releases">
2019-01-17 09:46:10 +03:00
Releases
</NavLink>
</HeaderText>
</Box>
<Box display={['block', 'block', 'none']}>
2018-12-05 03:14:33 +03:00
<Link href="#sidenav">
<BorderBox
border={1}
2018-12-05 03:14:33 +03:00
borderColor="gray.6"
borderRadius={3}
color="white"
display="inline-block"
2018-12-05 03:14:33 +03:00
px="12px"
py="6px"
>
<Text fontWeight="bold" fontSize={1}>
Menu
</Text>
2018-12-05 03:14:33 +03:00
</BorderBox>
</Link>
</Box>
</Flex>
</BoxShadow>
</Sticky>
)
export default Header