mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-23 14:06:59 +02:00
fix: proper collapsing of long element (#5694)
* fix: proper collapsing of long element * Add example * Reorder * Another solution with overflow * Restore original solution
This commit is contained in:
parent
e22170408a
commit
1361a5a38e
2 changed files with 14 additions and 18 deletions
|
@ -197,21 +197,8 @@ function CollapsibleBase({
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const el = collapsibleRef.current!;
|
applyCollapsedStyle(collapsibleRef.current!, collapsed);
|
||||||
const currentCollapsibleElementHeight = el.style.height;
|
onCollapseTransitionEnd?.(collapsed);
|
||||||
|
|
||||||
if (
|
|
||||||
!collapsed &&
|
|
||||||
parseInt(currentCollapsibleElementHeight, 10) === el.scrollHeight
|
|
||||||
) {
|
|
||||||
applyCollapsedStyle(el, false);
|
|
||||||
onCollapseTransitionEnd?.(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (currentCollapsibleElementHeight === CollapsedStyles.height) {
|
|
||||||
applyCollapsedStyle(el, true);
|
|
||||||
onCollapseTransitionEnd?.(true);
|
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
className={className}>
|
className={className}>
|
||||||
{children}
|
{children}
|
||||||
|
|
|
@ -22,7 +22,16 @@ module.exports = {
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
label: 'Huge sidebar category',
|
label: 'Huge sidebar category',
|
||||||
items: generateHugeSidebarItems(4),
|
items: [
|
||||||
|
...[
|
||||||
|
{
|
||||||
|
type: 'link',
|
||||||
|
href: '/',
|
||||||
|
label: 'Test Test test test test test test',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
...generateHugeSidebarItems(4),
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'link',
|
type: 'link',
|
||||||
|
@ -46,8 +55,8 @@ module.exports = {
|
||||||
|
|
||||||
function generateHugeSidebarItems() {
|
function generateHugeSidebarItems() {
|
||||||
const maxLevel = 4;
|
const maxLevel = 4;
|
||||||
const linksCount = 5;
|
const linksCount = 8;
|
||||||
const categoriesCount = 5;
|
const categoriesCount = 8;
|
||||||
|
|
||||||
function generateRecursive(maxLevel, currentLevel = 0) {
|
function generateRecursive(maxLevel, currentLevel = 0) {
|
||||||
if (currentLevel === maxLevel) {
|
if (currentLevel === maxLevel) {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue