Skip to content

Commit

Permalink
feat(v2): add ability to specify CSS class for navbar item (#2660)
Browse files Browse the repository at this point in the history 
* feat(v2): add ability to specify CSS class for navbar item

* Fix linting issues
  • Loading branch information
@lex111
lex111 authored Apr 26, 2020
1 parent 379d3e0 commit c0e531e
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 21 deletions.
55 changes: 35 additions & 20 deletions packages/docusaurus-theme-classic/src/theme/Navbar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
return <NavLink className="navbar__item navbar__link" {...props} />;
return <NavLink className={navLinkClassNames(className)} {...props} />;
}

return (
Expand All @@ -60,44 +63,56 @@ function NavItem({items, position, ...props}) {
'dropdown--left': position === 'left',
'dropdown--right': position === 'right',
})}>
<NavLink className="navbar__item navbar__link" {...props}>
<NavLink className={navLinkClassNames(className)} {...props}>
{props.label}
</NavLink>
<ul className="dropdown__menu">
{items.map((linkItemInner, i) => (
<li key={i}>
<NavLink className="navbar__item navbar__link" {...linkItemInner} />
</li>
))}
{items.map(
({className: childItemClassName, ...linkItemInnerProps}, i) => (
<li key={i}>
<NavLink
className={navLinkClassNames(childItemClassName)}
{...linkItemInnerProps}
/>
</li>
),
)}
</ul>
</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) {
return (
<li className="menu__list-item">
<NavLink className="menu__link" {...props} />
<NavLink className={navLinkClassNames(className)} {...props} />
</li>
);
}

return (
<li className="menu__list-item">
<NavLink className="menu__link menu__link--sublist" {...props}>
<NavLink className={navLinkClassNames(className, true)} {...props}>
{props.label}
</NavLink>
<ul className="menu__list">
{items.map((linkItemInner, i) => (
<li className="menu__list-item" key={i}>
<NavLink
className="menu__link"
{...linkItemInner}
onClick={props.onClick}
/>
</li>
))}
{items.map(
({className: childItemClassName, ...linkItemInnerProps}, i) => (
<li className="menu__list-item" key={i}>
<NavLink
className={navLinkClassNames(childItemClassName)}
{...linkItemInnerProps}
onClick={props.onClick}
/>
</li>
),
)}
</ul>
</li>
);
Expand Down
1 change: 1 addition & 0 deletions website/docs/theme-classic.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,7 @@ module.exports = {
// To apply the active class styling on all
// routes starting with this path.
activeBasePath: 'docs',
className: '', // Custom CSS class (for styling any item)
},
// ... other links
],
Expand Down
2 changes: 1 addition & 1 deletion website/docusaurus.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,8 @@ module.exports = {
},
{
href: 'https://github.com/facebook/docusaurus',
label: 'GitHub',
position: 'right',
className: 'header-github-link',
},
],
},
Expand Down
18 changes: 18 additions & 0 deletions website/src/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,21 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
.navbar__item.dropdown > .navbar__link {
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;
}

0 comments on commit c0e531e

Please sign in to comment.