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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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>
  );
}