3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-03 12:17:20 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): add ability to specify CSS class for navbar item (#2660)

Browse source 
* feat(v2): add ability to specify CSS class for navbar item

* Fix linting issues
This commit is contained in:
Alexey Pyltsyn 2020-04-26 21:21:36 +03:00 • committed by GitHub
parent 379d3e0d23
commit c0e531e5d9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 55 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
packages/docusaurus-theme-classic/src/theme/Navbar/index.js
View file

@ -49,9 +49,12 @@ function NavLink({activeBasePath, to, href, label, position, ...props}) {
); );
} }
function NavItem({items, position, ...props}) { function NavItem({items, position, className, ...props}) {
const navLinkClassNames = (extraClassName) =>
classnames('navbar__item', 'navbar__link', extraClassName);
if (!items) { if (!items) {
return <NavLink className="navbar__item navbar__link" {...props} />; return <NavLink className={navLinkClassNames(className)} {...props} />;
} }
return ( return (
@ -60,44 +63,56 @@ function NavItem({items, position, ...props}) {
'dropdown--left': position === 'left', 'dropdown--left': position === 'left',
'dropdown--right': position === 'right', 'dropdown--right': position === 'right',
})}> })}>
<NavLink className="navbar__item navbar__link" {...props}> <NavLink className={navLinkClassNames(className)} {...props}>
{props.label} {props.label}
</NavLink> </NavLink>
<ul className="dropdown__menu"> <ul className="dropdown__menu">
{items.map((linkItemInner, i) => ( {items.map(
({className: childItemClassName, ...linkItemInnerProps}, i) => (
<li key={i}> <li key={i}>
<NavLink className="navbar__item navbar__link" {...linkItemInner} /> <NavLink
className={navLinkClassNames(childItemClassName)}
{...linkItemInnerProps}
/>
</li> </li>
))} ),
)}
</ul> </ul>
</div> </div>
); );
} }
function MobileNavItem({items, ...props}) { function MobileNavItem({items, className, ...props}) {
const navLinkClassNames = (extraClassName, isSubList = false) =>
classnames('menu__link', extraClassName, {
'menu__link--sublist': isSubList,
});
if (!items) { if (!items) {
return ( return (
<li className="menu__list-item"> <li className="menu__list-item">
<NavLink className="menu__link" {...props} /> <NavLink className={navLinkClassNames(className)} {...props} />
</li> </li>
); );
} }
return ( return (
<li className="menu__list-item"> <li className="menu__list-item">
<NavLink className="menu__link menu__link--sublist" {...props}> <NavLink className={navLinkClassNames(className, true)} {...props}>
{props.label} {props.label}
</NavLink> </NavLink>
<ul className="menu__list"> <ul className="menu__list">
{items.map((linkItemInner, i) => ( {items.map(
({className: childItemClassName, ...linkItemInnerProps}, i) => (
<li className="menu__list-item" key={i}> <li className="menu__list-item" key={i}>
<NavLink <NavLink
className="menu__link" className={navLinkClassNames(childItemClassName)}
{...linkItemInner} {...linkItemInnerProps}
onClick={props.onClick} onClick={props.onClick}
/> />
</li> </li>
))} ),
)}
</ul> </ul>
</li> </li>
); );

1
website/docs/theme-classic.md
View file

@ -138,6 +138,7 @@ module.exports = {
// To apply the active class styling on all // To apply the active class styling on all
// routes starting with this path. // routes starting with this path.
activeBasePath: 'docs', activeBasePath: 'docs',
className: '', // Custom CSS class (for styling any item)
}, },
// ... other links // ... other links
], ],

2
website/docusaurus.config.js
View file

@ -120,8 +120,8 @@ module.exports = {
}, },
{ {
href: 'https://github.com/facebook/docusaurus', href: 'https://github.com/facebook/docusaurus',
label: 'GitHub',
position: 'right', position: 'right',
className: 'header-github-link',
}, },
], ],
}, },

18
website/src/css/custom.css
View file

@ -35,3 +35,21 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
.navbar__item.dropdown > .navbar__link { .navbar__item.dropdown > .navbar__link {
pointer-events: none; pointer-events: none;
} }
.header-github-link:hover {
opacity: 0.6;
}
.header-github-link:before {
content: '';
width: 24px;
height: 24px;
display: flex;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
no-repeat;
}
html[data-theme='dark'] .header-github-link:before {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
no-repeat;
}