diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category/index.tsx index 22270f21a3..9a49be27d1 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category/index.tsx @@ -31,6 +31,8 @@ import useIsBrowser from '@docusaurus/useIsBrowser'; import DocSidebarItems from '@theme/DocSidebarItems'; import type {Props} from '@theme/DocSidebarItem/Category'; +import styles from './styles.module.css'; + // If we navigate to a category and it becomes active, it should automatically // expand itself function useAutoExpandActiveCategory({ @@ -126,6 +128,14 @@ function CollapseButton({ ); } +function CategoryLinkLabel({label}: {label: string}) { + return ( + + {label} + + ); +} + export default function DocSidebarItemCategory({ item, onItemClick, @@ -179,6 +189,29 @@ export default function DocSidebarItemCategory({ } }, [collapsible, expandedItem, index, setCollapsed, autoCollapseCategories]); + const handleItemClick: ComponentProps<'a'>['onClick'] = (e) => { + onItemClick?.(item); + if (collapsible) { + if (href) { + // When already on the category's page, we collapse it + // We don't use "isActive" because it would collapse the + // category even when we browse a children element + // See https://github.com/facebook/docusaurus/issues/11213 + if (isCurrentPage) { + e.preventDefault(); + updateCollapsed(); + } else { + // When navigating to a new category, we always expand + // see https://github.com/facebook/docusaurus/issues/10854#issuecomment-2609616182 + updateCollapsed(false); + } + } else { + e.preventDefault(); + updateCollapsed(); + } + } + }; + return (
  • { - onItemClick?.(item); - if (href) { - // When already on the category's page, we collapse it - // We don't use "isActive" because it would collapse the - // category even when we browse a children element - // See https://github.com/facebook/docusaurus/issues/11213 - if (isCurrentPage) { - e.preventDefault(); - updateCollapsed(); - } else { - // When navigating to a new category, we always expand - // see https://github.com/facebook/docusaurus/issues/10854#issuecomment-2609616182 - updateCollapsed(false); - } - } else { - e.preventDefault(); - updateCollapsed(); - } - } - : () => { - onItemClick?.(item); - } - } + onClick={handleItemClick} aria-current={isCurrentPage ? 'page' : undefined} role={collapsible && !href ? 'button' : undefined} aria-expanded={collapsible && !href ? !collapsed : undefined} href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback} {...props}> - {label} + {href && collapsible && ( + {label} + + ); +} + export default function DocSidebarItemLink({ item, onItemClick, @@ -51,7 +59,7 @@ export default function DocSidebarItemLink({ onClick: onItemClick ? () => onItemClick(item) : undefined, })} {...props}> - {label} + {!isInternalLink && }
  • diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Link/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Link/styles.module.css index 4abcb56762..a48f210974 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Link/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Link/styles.module.css @@ -8,3 +8,11 @@ .menuExternalLink { align-items: center; } + +.linkLabel { + overflow: hidden; + display: -webkit-box; + line-clamp: 2; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} diff --git a/project-words.txt b/project-words.txt index 36c96b80c8..03eeb8db4d 100644 --- a/project-words.txt +++ b/project-words.txt @@ -136,6 +136,7 @@ lifecycles lightningcss Linkify linkify +longlonglonglonglonglonglonglonglonglonglonglong Lorber lorber Lorber's diff --git a/website/_dogfooding/_docs tests/tests/sidebar-display/Category 2 Long Long Long Long Long Long Long Long Long Long Long/doc1.mdx b/website/_dogfooding/_docs tests/tests/sidebar-display/Category 2 Long Long Long Long Long Long Long Long Long Long Long/doc1.mdx new file mode 100644 index 0000000000..02823ef8d5 --- /dev/null +++ b/website/_dogfooding/_docs tests/tests/sidebar-display/Category 2 Long Long Long Long Long Long Long Long Long Long Long/doc1.mdx @@ -0,0 +1 @@ +# Doc 1 diff --git a/website/_dogfooding/_docs tests/tests/sidebar-display/Category1LongLongLongLongLongLongLongLongLongLong/doc1.mdx b/website/_dogfooding/_docs tests/tests/sidebar-display/Category1LongLongLongLongLongLongLongLongLongLong/doc1.mdx new file mode 100644 index 0000000000..02823ef8d5 --- /dev/null +++ b/website/_dogfooding/_docs tests/tests/sidebar-display/Category1LongLongLongLongLongLongLongLongLongLong/doc1.mdx @@ -0,0 +1 @@ +# Doc 1 diff --git a/website/_dogfooding/_docs tests/tests/sidebar-display/Category1LongLongLongLongLongLongLongLongLongLong/doc2 long long long long long long long long long long long long.mdx b/website/_dogfooding/_docs tests/tests/sidebar-display/Category1LongLongLongLongLongLongLongLongLongLong/doc2 long long long long long long long long long long long long.mdx new file mode 100644 index 0000000000..816e33bf62 --- /dev/null +++ b/website/_dogfooding/_docs tests/tests/sidebar-display/Category1LongLongLongLongLongLongLongLongLongLong/doc2 long long long long long long long long long long long long.mdx @@ -0,0 +1 @@ +# Doc 2 long long long long long long long long long long long long diff --git a/website/_dogfooding/_docs tests/tests/sidebar-display/Category1LongLongLongLongLongLongLongLongLongLong/doc3longlonglonglonglonglonglonglonglonglonglonglong.mdx b/website/_dogfooding/_docs tests/tests/sidebar-display/Category1LongLongLongLongLongLongLongLongLongLong/doc3longlonglonglonglonglonglonglonglonglonglonglong.mdx new file mode 100644 index 0000000000..0d0eb1de3d --- /dev/null +++ b/website/_dogfooding/_docs tests/tests/sidebar-display/Category1LongLongLongLongLongLongLongLongLongLong/doc3longlonglonglonglonglonglonglonglonglonglonglong.mdx @@ -0,0 +1 @@ +# Doc 3 longlonglonglonglonglonglonglonglonglonglonglong diff --git a/website/_dogfooding/_docs tests/tests/sidebar-display/_category_.json b/website/_dogfooding/_docs tests/tests/sidebar-display/_category_.json new file mode 100644 index 0000000000..8dcbb76c67 --- /dev/null +++ b/website/_dogfooding/_docs tests/tests/sidebar-display/_category_.json @@ -0,0 +1,9 @@ +{ + "label": "Sidebar Display", + "link": { + "type": "generated-index", + "title": "Sidebar Display", + "description": "Testing edge cases of how the docs sidebar is displayed" + }, + "position": 1 +}