Skip to content

Commit

Permalink
add home breadcrumb item
Browse files Browse the repository at this point in the history
  • Loading branch information
slorber committed Feb 16, 2022
1 parent 1af2210 commit 8a76974
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 23 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,46 +5,58 @@
* LICENSE file in the root directory of this source tree.
*/

import React from 'react';
import React, {type ReactNode} from 'react';
import {ThemeClassNames, useSidebarBreadcrumbs} from '@docusaurus/theme-common';
import styles from './styles.module.css';
import clsx from 'clsx';
import type {PropSidebarBreadcrumbsItem} from '@docusaurus/plugin-content-docs';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';

function DocBreadcrumbsItemContent({
item,
// TODO move to design system folder
function BreadcrumbsItemLink({
children,
href,
}: {
item: PropSidebarBreadcrumbsItem;
children: ReactNode;
href?: string;
}): JSX.Element {
const className = clsx('breadcrumbs__link', styles.breadcrumbItem);

return item.href ? (
<Link className={className} href={item.href}>
{item.label}
const className = clsx('breadcrumbs__link', styles.breadcrumbsItemLink);
return href ? (
<Link className={className} href={href}>
{children}
</Link>
) : (
<span className={className}>{item.label}</span>
<span className={className}>{children}</span>
);
}

function DocBreadcrumbsItem({
item,
// TODO move to design system folder
function BreadcrumbsItem({
children,
active,
}: {
item: PropSidebarBreadcrumbsItem;
children: ReactNode;
active?: boolean;
}): JSX.Element {
return (
<li
className={clsx('breadcrumbs__item', {
'breadcrumbs__item--active': active,
})}>
<DocBreadcrumbsItemContent item={item} />
{children}
</li>
);
}

function HomeBreadcrumbItem() {
const homeHref = useBaseUrl('/');
return (
<BreadcrumbsItem>
<BreadcrumbsItemLink href={homeHref}>🏠</BreadcrumbsItemLink>
</BreadcrumbsItem>
);
}

export default function DocBreadcrumbs(): JSX.Element | null {
const breadcrumbs = useSidebarBreadcrumbs();

Expand All @@ -60,12 +72,13 @@ export default function DocBreadcrumbs(): JSX.Element | null {
)}
aria-label="breadcrumbs">
<ul className="breadcrumbs">
<HomeBreadcrumbItem />
{breadcrumbs.map((item, idx) => (
<DocBreadcrumbsItem
key={idx}
item={item}
active={idx === breadcrumbs.length - 1}
/>
<BreadcrumbsItem key={idx} active={idx === breadcrumbs.length - 1}>
<BreadcrumbsItemLink href={item.href}>
{item.label}
</BreadcrumbsItemLink>
</BreadcrumbsItem>
))}
</ul>
</nav>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,18 @@
margin-bottom: 0.4rem;
}

.breadcrumbItem {
.breadcrumbsItemLink {
--ifm-breadcrumb-size-multiplier: 0.7 !important;
margin-bottom: 0.4rem;
background: var(--ifm-color-gray-100);
}

html[data-theme='dark'] .breadcrumbItem {
html[data-theme='dark'] .breadcrumbsItemLink {
background-color: var(--ifm-color-gray-900);
}

@media (min-width: 997px) {
.breadcrumbItem {
.breadcrumbsItemLink {
--ifm-breadcrumb-size-multiplier: 0.8;
}
}

0 comments on commit 8a76974

Please sign in to comment.