refactor(theme-classic): little breadcrumbs improvements (#6932)

facebook · Mar 18, 2022 · c3a8afe · c3a8afe
1 parent b19cab5
commit c3a8afe
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 19 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
@@ -24,7 +24,7 @@ function BreadcrumbsItemLink({
   children: ReactNode;
   href?: string;
 }): JSX.Element {
-  const className = clsx('breadcrumbs__link', styles.breadcrumbsItemLink);
+  const className = 'breadcrumbs__link';
   return href ? (
     <Link className={className} href={href} itemProp="item">
       <span itemProp="name">{children}</span>
@@ -98,7 +98,8 @@ export default function DocBreadcrumbs(): JSX.Element | null {
             key={idx}
             active={idx === breadcrumbs.length - 1}
             index={idx}>
-            <BreadcrumbsItemLink href={item.href}>
+            <BreadcrumbsItemLink
+              href={idx < breadcrumbs.length - 1 ? item.href : undefined}>
               {item.label}
             </BreadcrumbsItemLink>
           </BreadcrumbsItem>

diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/styles.module.css
@@ -6,21 +6,6 @@
  */
 
 .breadcrumbsContainer {
-  margin-bottom: 0.4rem;
-}
-
-.breadcrumbsItemLink {
-  --ifm-breadcrumb-size-multiplier: 0.7 !important;
-  margin-bottom: 0.4rem;
-  background: var(--ifm-color-gray-100);
-}
-
-html[data-theme='dark'] .breadcrumbsItemLink {
-  background-color: var(--ifm-color-gray-900);
-}
-
-@media (min-width: 997px) {
-  .breadcrumbsItemLink {
-    --ifm-breadcrumb-size-multiplier: 0.8;
-  }
+  --ifm-breadcrumb-size-multiplier: 0.8;
+  margin-bottom: 0.8rem;
 }