Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 | import {BorderBox, Flex, StyledOcticon, Link, themeGet} from '@primer/components'
import {LinkExternalIcon} from '@primer/octicons-react'
import {Link as GatsbyLink} from 'gatsby'
import preval from 'preval.macro'
import React from 'react'
import styled from 'styled-components'
import {Location} from '@reach/router'
// This code needs to run at build-time so it can access the file system.
const repositoryUrl = preval`
const readPkgUp = require('read-pkg-up')
const getPkgRepo = require('get-pkg-repo')
try {
const repo = getPkgRepo(readPkgUp.sync().package)
module.exports = \`https://github.com/\${repo.user}/\${repo.project}\`
} catch (error) {
module.exports = ''
}
`
const NavLink = styled(Link)`
&.active {
font-weight: ${themeGet('fontWeights.bold')};
color: ${themeGet('colors.gray.8')};
}
&.activePage {
color: ${themeGet('colors.gray.8')};
}
`
function PageLink(props) {
return (
<Location>
{({location}) => {
const active = location.pathname === props.to;
return (
<BorderBox borderWidth={0} borderLeftWidth={active ? '3px' : '1px'} borderRadius={0}>
<NavLink marginLeft={2} paddingLeft={active ? '0px' : '2px'} {...props}>
{props.children}
</NavLink>
</BorderBox>
);
}}
</Location>
);
}
function isActiveUrl(parent, possibleChild) {
return (parent === possibleChild || isChildUrl(parent, possibleChild));
}
function isChildUrl(parent, possibleChild) {
return possibleChild.startsWith(parent + '/');
}
function NavItems(props) {
return (
<Location>
{({location}) => {
return (
<>
{props.items.map((item) => (
<BorderBox
key={item.title}
borderWidth={0}
borderRadius={0}
borderTopWidth={1}
py={3}
px={4}
>
<Flex flexDirection="column">
<NavLink
as={GatsbyLink}
to={item.url}
activeClassName="active"
partiallyActive={true}
color="inherit"
>
{item.title}
</NavLink>
{isActiveUrl(item.url, location.pathname) && item.children ? (
<Flex flexDirection="column" mt={2}>
{item.children.map((child) => (
<>
<NavLink
key={child.title}
as={GatsbyLink}
to={child.url}
activeClassName="active"
partiallyActive={true}
display="block"
py={1}
mt={2}
fontSize={1}
>
{child.title}
</NavLink>
{isActiveUrl(child.url, location.pathname) && child.children ? (
<Flex flexDirection="column" mt={2}>
{child.children.map((page) => (
<PageLink
key={page.title}
as={GatsbyLink}
to={page.url}
activeClassName="activePage"
display="block"
py={1}
fontSize={1}
>
{page.title}
</PageLink>
))}
</Flex>
) : null }
</>
))}
</Flex>
) : null}
</Flex>
</BorderBox>
))}
{repositoryUrl && props.editOnGitHub !== false ? (
<BorderBox borderWidth={0} borderTopWidth={1} borderRadius={0} py={5} px={4}>
<Link href={repositoryUrl} color="inherit">
<Flex justifyContent="space-between" alignItems="center" color="gray.5">
Edit on GitHub
<StyledOcticon icon={LinkExternalIcon} color="gray.5" />
</Flex>
</Link>
</BorderBox>
) : null}
</>
);
}}
</Location>
)
}
export default NavItems
|