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

fix: apply proper class for active doc item on mobiles + avoid duplicated classes (#5264)

Browse source 
* fix: apply proper class for active doc item on mobiles

* Fixes after review
This commit is contained in:
Alexey Pyltsyn 2021-08-04 16:29:10 +03:00 • committed by GitHub
parent 2360c592ab
commit 2c0b82e7ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js
View file

@ -108,7 +108,6 @@ describe('themeConfig', () => {
position: 'left', position: 'left',
docId: 'intro', docId: 'intro',
label: 'Introduction', label: 'Introduction',
activeSidebarClassName: 'custom-class',
}, },
// Regular link // Regular link
{ {
@ -142,7 +141,6 @@ describe('themeConfig', () => {
items: [ items: [
{ {
type: 'doc', type: 'doc',
activeSidebarClassName: 'custom-class',
docId: 'npm', docId: 'npm',
label: 'NPM', label: 'NPM',
}, },

6
packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx
View file

@ -25,7 +25,7 @@ export function NavLink({
to, to,
href, href,
label, label,
activeClassName = 'navbar__link--active', activeClassName = '',
prependBaseUrlToHref, prependBaseUrlToHref,
...props ...props
}: NavLinkProps): JSX.Element { }: NavLinkProps): JSX.Element {
@ -45,7 +45,9 @@ export function NavLink({
} }
: { : {
isNavLink: true, isNavLink: true,
activeClassName, activeClassName: !props.className?.includes(activeClassName)
? activeClassName
: '',
to: toUrl, to: toUrl,
...(activeBasePath || activeBaseRegex ...(activeBasePath || activeBaseRegex
? { ? {

7
packages/docusaurus-theme-classic/src/theme/NavbarItem/DocNavbarItem.tsx
View file

@ -31,7 +31,6 @@ Available doc ids are:\n- ${docIds}`,
export default function DocNavbarItem({ export default function DocNavbarItem({
docId, docId,
activeSidebarClassName,
label: staticLabel, label: staticLabel,
docsPluginId, docsPluginId,
...props ...props
@ -45,15 +44,19 @@ export default function DocNavbarItem({
[activeVersion, preferredVersion, latestVersion].filter(Boolean), [activeVersion, preferredVersion, latestVersion].filter(Boolean),
); );
const doc = getDocInVersions(versions, docId); const doc = getDocInVersions(versions, docId);
const activeDocInfimaClassName = props.mobile
? 'menu__link--active'
: 'navbar__link--active';
return ( return (
<DefaultNavbarItem <DefaultNavbarItem
exact exact
{...props} {...props}
className={clsx(props.className, { className={clsx(props.className, {
[activeSidebarClassName]: [activeDocInfimaClassName]:
activeDoc && activeDoc.sidebar === doc.sidebar, activeDoc && activeDoc.sidebar === doc.sidebar,
})} })}
activeClassName={activeDocInfimaClassName}
label={staticLabel ?? doc.id} label={staticLabel ?? doc.id}
to={doc.path} to={doc.path}
/> />

1
packages/docusaurus-theme-classic/src/types.d.ts vendored
View file

@ -446,7 +446,6 @@ declare module '@theme/NavbarItem/DocNavbarItem' {
export type Props = DefaultNavbarItemProps & { export type Props = DefaultNavbarItemProps & {
readonly docId: string; readonly docId: string;
readonly activeSidebarClassName: string;
readonly docsPluginId?: string; readonly docsPluginId?: string;
}; };

1
packages/docusaurus-theme-classic/src/validateThemeConfig.js
View file

@ -79,7 +79,6 @@ const DocItemSchema = NavbarItemBaseSchema.append({
type: Joi.string().equal('doc').required(), type: Joi.string().equal('doc').required(),
docId: Joi.string().required(), docId: Joi.string().required(),
docsPluginId: Joi.string(), docsPluginId: Joi.string(),
activeSidebarClassName: Joi.string().default('navbar__link--active'),
}); });
const itemWithType = (type) => { const itemWithType = (type) => {

1
website/docs/api/themes/theme-configuration.md
View file

@ -351,7 +351,6 @@ Accepted fields:
| `docId` | `string` | The ID of the doc that this item links to. | Yes | | | `docId` | `string` | The ID of the doc that this item links to. | Yes | |
| `label` | `string` | The name to be shown for this item. | No | `docId` | | `label` | `string` | The name to be shown for this item. | No | `docId` |
| `position` | <code>'left' &#124; 'right'</code> | The side of the navbar this item should appear on. | No | `'left'` | | `position` | <code>'left' &#124; 'right'</code> | The side of the navbar this item should appear on. | No | `'left'` |
| `activeSidebarClassName` | `string` | The CSS class name to apply when this doc's sidebar is active. | No | `'navbar__link--active'` |
| `docsPluginId` | `string` | The ID of the docs plugin that the doc belongs to. | No | `'default'` | | `docsPluginId` | `string` | The ID of the docs plugin that the doc belongs to. | No | `'default'` |
Example configuration: Example configuration: