theme-ui#NavLink JavaScript Examples
The following examples show how to use
theme-ui#NavLink.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Footer.js From developer-portal with Apache License 2.0 | 6 votes |
|
Section = ({ title, content }) => {
return (
<Flex sx={{ flexDirection: 'column' }}>
<Text variant="plainText" sx={{ fontSize: 3, fontWeight: 'semiBold' }}>
{title}
</Text>
{content.map(([name, url]) => {
return url.indexOf('http') === 0 ? (
<NavLink
key={name}
href={url}
target="_blank"
sx={{ px: 0, py: 1, fontSize: 3, color: 'onBackgroundMuted' }}
variant="sidebar"
>
{name}
</NavLink>
) : (
<Link key={name} href={url} passHref>
<NavLink
sx={{ px: 0, py: 1, fontSize: 3, color: 'onBackgroundMuted' }}
variant="sidebar"
>
{name}
</NavLink>
</Link>
);
})}
</Flex>
);
}
Example #2
| Source File: SidebarDocumentation.js From developer-portal with Apache License 2.0 | 6 votes |
|
ListItem = ({
title,
root: isRoot,
activeSlug,
resourcePath,
slug,
parent: hasParent,
mobile,
}) => {
const active = slug === activeSlug;
const variableStyles = isRoot
? { fontSize: 3, color: active ? 'primary' : 'text' }
: hasParent
? { fontSize: 2, color: active ? 'primary' : 'onBackgroundMuted', ml: 3 }
: undefined;
return (
<Flex sx={{ p: 0, pt: isRoot ? 3 : 2 }}>
<Flex
sx={{
flexDirection: 'row',
width: '100%',
border: mobile ? undefined : active ? 'light' : undefined,
borderColor: 'primary',
borderWidth: '0 1px 0 0',
position: [undefined, undefined, 'relative'],
left: '1px',
}}
>
<Link href={`/${resourcePath}/[slug]`} as={`/${resourcePath}/${slug}`} passHref>
<NavLink sx={{ ...variableStyles, ...{ py: 0 } }} variant="sidebar">
{title}
</NavLink>
</Link>
</Flex>
</Flex>
);
}
Example #3
| Source File: SidebarDocumentation.js From developer-portal with Apache License 2.0 | 6 votes |
|
MobileSidebar = ({ open, onClick }) => {
return (
<Box
sx={{
border: open ? undefined : 'light',
borderColor: 'muted',
borderWidth: '0 0 1px 0',
p: 2,
}}
onClick={() => onClick(!open)}
>
<Flex sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
<NavLink sx={{ px: 0 }}>Topics</NavLink>
<Icon
name={open ? 'dp_arrow_up' : 'dp_arrow_down'}
size="auto"
color="primary"
sx={{
cursor: 'pointer',
height: 20,
width: 20,
}}
/>
</Flex>
</Box>
);
}
Example #4
| Source File: SidebarGuides.js From developer-portal with Apache License 2.0 | 6 votes |
|
ListItem = ({ title, activeSlug, resourcePath, slug }) => {
const active = slug === activeSlug;
return (
<Flex>
<Link href={`/${resourcePath}/[slug]`} as={`/${resourcePath}/${slug}`} passHref>
<NavLink sx={{ fontSize: 3, color: active ? 'primary' : undefined }} variant="sidebar">
{title}
</NavLink>
</Link>
</Flex>
);
}
Example #5
| Source File: Ecosystem.js From developer-portal with Apache License 2.0 | 5 votes |
|
Ecosystem = ({ title, items }) => {
const tabs = items
.reduce((acc, { categories }) => acc.push(...categories) && acc, [])
.filter((item, idx, array) => array.indexOf(item) === idx)
.sort();
const [activeTab, setActiveTab] = useState(tabs[0]);
return (
<Container>
<Flex
sx={{
flexDirection: 'column',
mb: 6,
}}
>
<Flex
sx={{
pb: 4,
alignItems: 'center',
}}
>
<Flex sx={{ width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
<Heading>{title}</Heading>
<ThemeLink href={SUBMIT_LINK} target="_blank">
<Flex sx={{ alignItems: 'center' }}>
<Text sx={{ color: 'text', cursor: 'pointer' }}>Submit your tool</Text>
<Icon sx={{ ml: 2 }} color="primary" name={'arrow_right'}></Icon>
</Flex>
</ThemeLink>
</Flex>
</Flex>
<Flex
sx={{
alignItems: 'center',
pb: 2,
overflow: 'auto',
}}
>
{tabs.map((name) => (
<NavLink
key={name}
onClick={() => setActiveTab(name)}
sx={{
color: activeTab === name ? 'primary' : undefined,
minWidth: 'max-content',
pl: 2,
pr: 4,
'&:first-of-type': { pl: 0 },
}}
>
{EcosystemCategories[name]}
</NavLink>
))}
</Flex>
<Grid columns={[1, 2]} sx={{ width: '100%' }}>
{items
.filter(({ categories }) => categories.includes(activeTab))
.map(({ title, link, description }) => {
return <ListItem key={title} title={title} description={description} link={link} />;
})}
</Grid>
</Flex>
</Container>
);
}
Example #6
| Source File: Header.js From developer-portal with Apache License 2.0 | 5 votes |
|
MobileMenu = ({ close, query, bannerData }) => {
const [{ linkText, url, text }] = bannerData;
return (
<Container
sx={{
bg: 'background',
height: '100%',
position: 'fixed',
zIndex: 1,
}}
>
<Flex sx={{ justifyContent: 'space-between', mb: 6, py: 2 }}>
<Link href="/" passHref>
<ThemeLink>
<Icon name="maker" color="text" size={4} />
</ThemeLink>
</Link>
<IconButton sx={{ cursor: 'pointer', pt: 3 }}>
<Icon
name="dp_close"
size="auto"
color="text"
sx={{
cursor: 'pointer',
height: 20,
width: 20,
}}
onClick={close}
/>
</IconButton>
</Flex>
<Flex as="nav" sx={{ flexDirection: 'column', px: 2 }}>
<ThemeLink href={url} target="_blank">
<Flex sx={{ alignItems: 'center', px: 2 }}>
<Icon color="primary" name="increase"></Icon>
<Text sx={{ px: 2, fontSize: 5, color: 'text' }}>{linkText}</Text>
</Flex>
</ThemeLink>
<Text sx={{ px: 2, fontSize: 2, color: 'onBackgroundMuted' }}>{text}</Text>
{LINKS.map(({ name, url }) => (
<Link href={{ pathname: url, query }} passHref key={name}>
<NavLink
key={name}
sx={{
py: 4,
fontSize: 7,
}}
variant="links.mobileNav"
>
{name}
</NavLink>
</Link>
))}
</Flex>
</Container>
);
}
Example #7
| Source File: Header.js From developer-portal with Apache License 2.0 | 5 votes |
|
Header = ({ query, subnav, mobile, router }) => {
const [mobileOpened, setMobileOpened] = useState(false);
useEffect(() => {
setMobileOpened(false);
}, [router?.asPath]);
return (
<Box
sx={{ width: '100%', zIndex: 1, position: [mobileOpened ? 'fixed' : undefined, undefined] }}
>
{mobileOpened ? (
<MobileMenu close={() => setMobileOpened(false)} bannerData={bannerData} />
) : (
<>
{!mobile && <Banners bannerData={bannerData} />}
<Container as="header" mt={[0, 2]} sx={{ bg: 'background' }}>
<Flex
sx={{
alignItems: 'center',
justifyContent: 'space-between',
mb: [0, 3],
py: [2, 0],
}}
>
<Link href="/" passHref>
<ThemeLink>
<Icon name="maker" color="text" size={4} />
</ThemeLink>
</Link>
<Flex sx={{ alignItems: 'center' }}>
<Flex
as="nav"
sx={{
alignItems: 'center',
}}
>
{LINKS.map(({ name, url }) => (
<Link href={{ pathname: url, query }} passHref key={name}>
<NavLink
key={name}
sx={{
display: ['none', 'none', 'block'],
pr: 4,
'&:last-child': { pr: [null, 0] },
}}
variant="links.nav"
>
{name}
</NavLink>
</Link>
))}
</Flex>
<IconButton sx={{ display: ['block', 'block', 'none'], cursor: 'pointer' }}>
<Icon
name="dp_menu"
size="auto"
color="text"
sx={{
height: 24,
width: 19,
}}
onClick={() => setMobileOpened(!mobileOpened)}
/>
</IconButton>
</Flex>
</Flex>
</Container>
</>
)}
{subnav ?? null}
</Box>
);
}
Example #8
| Source File: Infobar.js From developer-portal with Apache License 2.0 | 5 votes |
|
ContentsMenuItem = ({
resourcePath,
slug,
title,
anchor,
root,
activeAnchor,
setActiveAnchor,
}) => {
const active = activeAnchor === anchor;
return (
<Flex
as="li"
sx={{
variant: 'styles.fakeLi',
my: 1,
position: 'relative',
right: '1px',
}}
>
<Flex
sx={{
width: '100%',
pl: !root ? 3 : undefined,
border: active ? 'light' : undefined,
borderColor: 'primary',
borderWidth: '0 0 0 1px',
}}
>
<Link href={`/${resourcePath}/[slug]`} as={`/${resourcePath}/${slug}#${anchor}`} passHref>
<NavLink
variant="infobar"
onClick={() => setActiveAnchor(anchor)}
sx={{
textAlign: 'left',
color: active ? 'text' : undefined,
borderRadius: 'xs',
py: 0,
px: [2, 2, 2, 4],
lineHeight: '21px',
width: '100%',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{title}
</NavLink>
</Link>
</Flex>
</Flex>
);
}
Example #9
| Source File: SubNav.js From developer-portal with Apache License 2.0 | 5 votes |
|
SubNav = ({ links, query, router }) => {
const activeGroup = useStore((state) => state.activeGroup);
const activeLink = links.find((link) => link.slug === activeGroup);
const refs = useMemo(() => Array.from({ length: links.length }).map(() => createRef()), [
links.length,
]);
useEffect(() => {
setTimeout(() => {
const idx = links.indexOf(activeLink);
refs[idx]?.current?.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center',
});
}, 200);
}, [activeLink, links, refs, router?.query.slug]);
return (
<Box
sx={{
border: 'light',
borderColor: 'muted',
borderWidth: '1px 0 1px 0',
bg: 'background',
}}
>
<Container sx={{ mt: 2 }}>
<Flex
as="nav"
sx={{
alignItems: 'center',
pb: 2,
overflow: 'auto',
'::-webkit-scrollbar': {
display: 'none',
},
scrollbarWidth: 'none',
}}
>
{links.map(({ name, url, slug }, i) => (
<Link href={{ pathname: url, query }} passHref key={name}>
<NavLink
ref={refs[i]}
sx={{
color: slug === activeGroup ? 'primary' : undefined,
minWidth: 'max-content',
pl: 2,
pr: 4,
'&:first-of-type': { pl: 0 },
}}
>
{name}
</NavLink>
</Link>
))}
</Flex>
</Container>
</Box>
);
}
