Skip to content
This repository has been archived by the owner on Aug 31, 2023. It is now read-only.

Commit

Permalink
feat: nav item support http://xx.com type link
Browse files Browse the repository at this point in the history
  • Loading branch information
afc163 committed May 22, 2020
1 parent 925e82d commit f23cb97
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 21 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
a {
.export svg {
width: 12px;
height: 12px;
margin-left: 3px;
opacity: 0.3;
position: relative;
top: 1.5px;
transition: all 0.3s;
margin-right: -6px;
}

&:hover .export svg {
opacity: 0.5;
}
}
11 changes: 11 additions & 0 deletions @antv/gatsby-theme-antv/site/components/ExternalLinkIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react';
import ExternalLink from '../images/external-link.svg';
import styles from './ExternalLinkIcon.module.less';

const ExternalLinkIcon: React.FC = () => (
<i className={styles.export}>
<ExternalLink />
</i>
);

export default ExternalLinkIcon;
15 changes: 0 additions & 15 deletions @antv/gatsby-theme-antv/site/components/Header.module.less
Original file line number Diff line number Diff line change
Expand Up @@ -126,24 +126,9 @@
transition: all 0.3s;
display: block;

.export svg {
width: 12px;
height: 12px;
margin-left: 3px;
opacity: 0.3;
position: relative;
top: 1.5px;
transition: all 0.3s;
margin-right: -6px;
}

&:hover {
color: @primary-color;
}

&:hover .export svg {
opacity: 0.5;
}
}

&:last-child {
Expand Down
6 changes: 2 additions & 4 deletions @antv/gatsby-theme-antv/site/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ import GitUrlParse from 'git-url-parse';
import Search, { SearchProps } from './Search';
import Products from './Products';
import NavMenuItems, { Nav } from './NavMenuItems';
import ExternalLinkIcon from './ExternalLinkIcon';
import { getChinaMirrorHost } from '../utils';
import { useLogoLink } from '../hooks';
import AntvLogo from '../images/antv.svg';
import TranslationIcon from '../images/translation.svg';
import ExternalLink from '../images/external-link.svg';
import styles from './Header.module.less';

const { Option } = Select;
Expand Down Expand Up @@ -273,9 +273,7 @@ const Header: React.FC<HeaderProps> = ({
}}
>
{t('国内镜像')}
<i className={styles.export}>
<ExternalLink />
</i>
<ExternalLinkIcon />
</a>
</li>
</Popover>
Expand Down
8 changes: 6 additions & 2 deletions @antv/gatsby-theme-antv/site/components/NavMenuItems.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Link } from 'gatsby';
import classNames from 'classnames';
import shallowequal from 'shallowequal';
import { useTranslation } from 'react-i18next';
import ExternalLinkIcon from './ExternalLinkIcon';
import styles from './Header.module.less';

const getDocument = (navs: Nav[], slug = '') =>
Expand Down Expand Up @@ -36,7 +37,9 @@ const NavMenuItems: React.FC<NavMenuItemsProps> = ({ navs = [], path }) => {
return (
<>
{navs.map((nav: Nav) => {
const href = `/${i18n.language}/${nav.slug}`;
const href = nav.slug.startsWith('http')
? nav.slug
: `/${i18n.language}/${nav.slug}`;
const title = capitalize(
getDocument(navs, nav.slug).title[i18n.language],
);
Expand All @@ -50,9 +53,10 @@ const NavMenuItems: React.FC<NavMenuItemsProps> = ({ navs = [], path }) => {
});
return (
<li key={title} className={className}>
{nav.target === '_blank' ? (
{nav.target === '_blank' || href.startsWith('http') ? (
<a href={href} target="_blank" rel="noopener noreferrer">
{title}
<ExternalLinkIcon />
</a>
) : (
<Link to={href}>{title}</Link>
Expand Down

0 comments on commit f23cb97

Please sign in to comment.