mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-28 16:37:07 +02:00
feat(v2): add icon to external navbar links (#4949)
* feat(v2): add icon to external navbar links * use isInternalUrl * Remove demo link Co-authored-by: slorber <lorber.sebastien@gmail.com>
This commit is contained in:
parent
ace285b3b5
commit
57cf20933e
4 changed files with 33 additions and 7 deletions
|
@ -6,15 +6,19 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import type {Props} from '@theme/IconExternalLink';
|
||||||
|
|
||||||
import styles from './styles.module.css';
|
import styles from './styles.module.css';
|
||||||
|
|
||||||
const IconExternalLink = (): JSX.Element => {
|
const IconExternalLink = ({
|
||||||
|
width = 13.5,
|
||||||
|
height = 13.5,
|
||||||
|
}: Props): JSX.Element => {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="14"
|
width={width}
|
||||||
height="14"
|
height={height}
|
||||||
role="img"
|
role="img"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
className={styles.iconExternalLink}>
|
className={styles.iconExternalLink}>
|
||||||
|
|
|
@ -16,6 +16,10 @@ import type {
|
||||||
DesktopOrMobileNavBarItemProps,
|
DesktopOrMobileNavBarItemProps,
|
||||||
Props,
|
Props,
|
||||||
} from '@theme/NavbarItem/DefaultNavbarItem';
|
} from '@theme/NavbarItem/DefaultNavbarItem';
|
||||||
|
import IconExternalLink from '@theme/IconExternalLink';
|
||||||
|
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||||
|
|
||||||
|
const dropdownLinkActiveClass = 'dropdown__link--active';
|
||||||
|
|
||||||
function NavLink({
|
function NavLink({
|
||||||
activeBasePath,
|
activeBasePath,
|
||||||
|
@ -32,6 +36,8 @@ function NavLink({
|
||||||
const toUrl = useBaseUrl(to);
|
const toUrl = useBaseUrl(to);
|
||||||
const activeBaseUrl = useBaseUrl(activeBasePath);
|
const activeBaseUrl = useBaseUrl(activeBasePath);
|
||||||
const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
|
const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
|
||||||
|
const isExternalLink = label && href && !isInternalUrl(href);
|
||||||
|
const isDropdownLink = activeClassName === dropdownLinkActiveClass;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
|
@ -53,7 +59,14 @@ function NavLink({
|
||||||
: null),
|
: null),
|
||||||
})}
|
})}
|
||||||
{...props}>
|
{...props}>
|
||||||
|
{isExternalLink ? (
|
||||||
|
<span>
|
||||||
{label}
|
{label}
|
||||||
|
<IconExternalLink {...(isDropdownLink && {width: 12, height: 12})} />
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
label
|
||||||
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -137,7 +150,7 @@ function NavItemDesktop({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
activeClassName="dropdown__link--active"
|
activeClassName={dropdownLinkActiveClass}
|
||||||
className={navLinkClassNames(childItemClassName, true)}
|
className={navLinkClassNames(childItemClassName, true)}
|
||||||
{...childItemProps}
|
{...childItemProps}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -599,3 +599,12 @@ declare module '@theme/IconLanguage' {
|
||||||
const IconLanguage: (props: Props) => JSX.Element;
|
const IconLanguage: (props: Props) => JSX.Element;
|
||||||
export default IconLanguage;
|
export default IconLanguage;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
declare module '@theme/IconExternalLink' {
|
||||||
|
import type {ComponentProps} from 'react';
|
||||||
|
|
||||||
|
export type Props = ComponentProps<'svg'>;
|
||||||
|
|
||||||
|
const IconExternalLink: (props: Props) => JSX.Element;
|
||||||
|
export default IconExternalLink;
|
||||||
|
}
|
||||||
|
|
|
@ -372,7 +372,7 @@ const isVersioningDisabled = !!process.env.DISABLE_VERSIONING || isI18nStaging;
|
||||||
dropdownActiveClassDisabled: true,
|
dropdownActiveClassDisabled: true,
|
||||||
dropdownItemsAfter: [
|
dropdownItemsAfter: [
|
||||||
{
|
{
|
||||||
to: 'https://v1.docusaurus.io',
|
href: 'https://v1.docusaurus.io',
|
||||||
label: '1.x.x',
|
label: '1.x.x',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -386,7 +386,7 @@ const isVersioningDisabled = !!process.env.DISABLE_VERSIONING || isI18nStaging;
|
||||||
position: 'right',
|
position: 'right',
|
||||||
dropdownItemsAfter: [
|
dropdownItemsAfter: [
|
||||||
{
|
{
|
||||||
to: 'https://github.com/facebook/docusaurus/issues/3526',
|
href: 'https://github.com/facebook/docusaurus/issues/3526',
|
||||||
label: 'Help Us Translate',
|
label: 'Help Us Translate',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue