mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-03 11:22:30 +02:00
chore(v2): upgrade Infima (#2669)
* chore(v2): upgrade Infima * Make proper classes for active items * upgrade Infima to v0.2.0-alpha.9 Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>
This commit is contained in:
parent
c0e531e5d9
commit
1d8cc4b10f
4 changed files with 33 additions and 10 deletions
|
@ -12,7 +12,7 @@
|
|||
"@mdx-js/react": "^1.5.8",
|
||||
"classnames": "^2.2.6",
|
||||
"clipboard": "^2.0.6",
|
||||
"infima": "0.2.0-alpha.6",
|
||||
"infima": "0.2.0-alpha.9",
|
||||
"parse-numeric-range": "^0.0.2",
|
||||
"prism-react-renderer": "^1.1.0",
|
||||
"prismjs": "^1.20.0",
|
||||
|
|
|
@ -20,7 +20,15 @@ import useLogo from '@theme/hooks/useLogo';
|
|||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
function NavLink({activeBasePath, to, href, label, position, ...props}) {
|
||||
function NavLink({
|
||||
activeBasePath,
|
||||
to,
|
||||
href,
|
||||
label,
|
||||
position,
|
||||
activeClassName = 'navbar__link--active',
|
||||
...props
|
||||
}) {
|
||||
const toUrl = useBaseUrl(to);
|
||||
const activeBaseUrl = useBaseUrl(activeBasePath);
|
||||
|
||||
|
@ -34,7 +42,7 @@ function NavLink({activeBasePath, to, href, label, position, ...props}) {
|
|||
}
|
||||
: {
|
||||
isNavLink: true,
|
||||
activeClassName: 'navbar__link--active',
|
||||
activeClassName,
|
||||
to: toUrl,
|
||||
...(activeBasePath
|
||||
? {
|
||||
|
@ -50,8 +58,11 @@ function NavLink({activeBasePath, to, href, label, position, ...props}) {
|
|||
}
|
||||
|
||||
function NavItem({items, position, className, ...props}) {
|
||||
const navLinkClassNames = (extraClassName) =>
|
||||
classnames('navbar__item', 'navbar__link', extraClassName);
|
||||
const navLinkClassNames = (extraClassName, isDropdownItem) =>
|
||||
classnames(extraClassName, {
|
||||
'navbar__item navbar__link': !isDropdownItem,
|
||||
dropdown__link: isDropdownItem,
|
||||
});
|
||||
|
||||
if (!items) {
|
||||
return <NavLink className={navLinkClassNames(className)} {...props} />;
|
||||
|
@ -71,7 +82,8 @@ function NavItem({items, position, className, ...props}) {
|
|||
({className: childItemClassName, ...linkItemInnerProps}, i) => (
|
||||
<li key={i}>
|
||||
<NavLink
|
||||
className={navLinkClassNames(childItemClassName)}
|
||||
activeClassName="dropdown__link--active"
|
||||
className={navLinkClassNames(childItemClassName, true)}
|
||||
{...linkItemInnerProps}
|
||||
/>
|
||||
</li>
|
||||
|
@ -106,6 +118,7 @@ function MobileNavItem({items, className, ...props}) {
|
|||
({className: childItemClassName, ...linkItemInnerProps}, i) => (
|
||||
<li className="menu__list-item" key={i}>
|
||||
<NavLink
|
||||
activeClassName="menu__link--active"
|
||||
className={navLinkClassNames(childItemClassName)}
|
||||
{...linkItemInnerProps}
|
||||
onClick={props.onClick}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue