3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-01 03:08:17 +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',
docId: 'intro',
label: 'Introduction',
activeSidebarClassName: 'custom-class',
},
// Regular link
{
@ -142,7 +141,6 @@ describe('themeConfig', () => {
items: [
{
type: 'doc',
activeSidebarClassName: 'custom-class',
docId: 'npm',
label: 'NPM',
},

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

@ -25,7 +25,7 @@ export function NavLink({
to,
href,
label,
activeClassName = 'navbar__link--active',
activeClassName = '',
prependBaseUrlToHref,
...props
}: NavLinkProps): JSX.Element {
@ -45,7 +45,9 @@ export function NavLink({
}
: {
isNavLink: true,
activeClassName,
activeClassName: !props.className?.includes(activeClassName)
? activeClassName
: '',
to: toUrl,
...(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({
docId,
activeSidebarClassName,
label: staticLabel,
docsPluginId,
...props
@ -45,15 +44,19 @@ export default function DocNavbarItem({
[activeVersion, preferredVersion, latestVersion].filter(Boolean),
);
const doc = getDocInVersions(versions, docId);
const activeDocInfimaClassName = props.mobile
? 'menu__link--active'
: 'navbar__link--active';
return (
<DefaultNavbarItem
exact
{...props}
className={clsx(props.className, {
[activeSidebarClassName]:
[activeDocInfimaClassName]:
activeDoc && activeDoc.sidebar === doc.sidebar,
})}
activeClassName={activeDocInfimaClassName}
label={staticLabel ?? doc.id}
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 & {
readonly docId: string;
readonly activeSidebarClassName: 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(),
docId: Joi.string().required(),
docsPluginId: Joi.string(),
activeSidebarClassName: Joi.string().default('navbar__link--active'),
});
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 | |
| `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'` |
| `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'` |
Example configuration: