fix: Fix corner case behaviour of MiniToc and Toc (#300)

* fix: When toc.items.length === 0 toc not rendered * fix: Fix mobile miniToc overflow-mode behavour --------- Co-authored-by: Ruslan Bagautdinov <[email protected]>
diplodoc-platform · Sep 23, 2024 · 765b38e · 765b38e
1 parent 2598974
commit 765b38e
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 32 deletions.
diff --git a/src/components/MiniToc/MiniToc.scss b/src/components/MiniToc/MiniToc.scss
@@ -79,11 +79,22 @@
             margin-bottom: $miniTocTitleMargin;
         }
 
-        &:has(&_overflowed) &__bottom {
-            $bottomHeight: 20px;
+        &:has(&_overflowed) {
+            #{$class}__bottom {
+                $bottomHeight: 36px;
 
-            display: block;
-            height: $bottomHeight;
+                display: block;
+                height: $bottomHeight;
+            }
+
+            #{$class}__sections {
+                max-height: calc(
+                    100vh - var(--dc-header-height, #{$headerHeight}) - var(
+                            --dc-subnavigation-height,
+                            #{$subNavigationHeight}
+                        ) - #{$mobileMiniTocOffset} - #{$bottomHeight}
+                );
+            }
         }
 
         &__section {
@@ -105,7 +116,7 @@
                 100vh - var(--dc-header-height, #{$headerHeight}) - var(
                         --dc-subnavigation-height,
                         #{$subNavigationHeight}
-                    ) - #{$mobileMiniTocOffset} - #{$bottomHeight}
+                    ) - #{$mobileMiniTocOffset}
             );
         }
     }

diff --git a/src/components/Scrollspy/Scrollspy.tsx b/src/components/Scrollspy/Scrollspy.tsx
@@ -48,6 +48,7 @@ export class Scrollspy extends React.Component<ScrollspyInnerProps, ScrollspySta
     scrollByClick: boolean;
     firstItemIndexInView: number;
     lastItemIndexInView: number;
+    overflowChecked: boolean;
 
     constructor(props: ScrollspyInnerProps) {
         super(props);
@@ -57,6 +58,7 @@ export class Scrollspy extends React.Component<ScrollspyInnerProps, ScrollspySta
             inViewState: [],
         };
 
+        this.overflowChecked = false;
         this.scrollByClick = false;
         this.firstItemIndexInView = -1;
         this.lastItemIndexInView = -1;
@@ -86,6 +88,12 @@ export class Scrollspy extends React.Component<ScrollspyInnerProps, ScrollspySta
             this.initItems();
         }
 
+        if (!this.overflowChecked) {
+            this.overflowChecked = true;
+
+            this.checkListOverflow();
+        }
+
         if (router.hash !== prevProps.router.hash) {
             this.pauseScrollHandler();
             this.saveActiveItems(router.hash);

diff --git a/src/components/SubNavigation/SubNavigation.scss b/src/components/SubNavigation/SubNavigation.scss
@@ -72,7 +72,7 @@
                     100vh - var(--dc-header-height, $headerHeight) - var(
                             --dc-subnavigation-height,
                             $subNavigationHeight
-                        ) - #{$mobileMiniTocOffset}
+                        )
                 );
                 transition: max-height 300ms 0s;
             }

diff --git a/src/components/navigation/SidebarContent/SidebarContent.tsx b/src/components/navigation/SidebarContent/SidebarContent.tsx
@@ -47,14 +47,17 @@ export const SidebarContent: React.FC<SidebarContentProps & PropsWithChildren> =
     mobileControlsData,
     children,
 }) => {
+    const mainMenuIsOpened = mainMenuOpenessData && mainMenuOpenessData.isMainMenuOpened;
+    const mainMenuIsClosed = mainMenuOpenessData && !mainMenuOpenessData.isMainMenuOpened;
+
     const toc = navigationTocData &&
         navigationTocData.toc &&
-        mainMenuOpenessData &&
-        !mainMenuOpenessData.isMainMenuOpened && (
+        navigationTocData.toc.items.length > 0 &&
+        mainMenuIsClosed && (
             <React.Fragment>
                 <div className={b('to-main-menu')}>
                     <ToMainMenu
-                        mainMenuIsOpen={mainMenuOpenessData.isMainMenuOpened}
+                        mainMenuIsOpen={mainMenuIsOpened}
                         openMainMenu={mainMenuOpenessData.openMainMenu}
                     />
                 </div>
@@ -69,29 +72,34 @@ export const SidebarContent: React.FC<SidebarContentProps & PropsWithChildren> =
             </React.Fragment>
         );
 
-    const mainMenu = pcNavigationData &&
-        ((mainMenuOpenessData && mainMenuOpenessData.isMainMenuOpened) || !navigationTocData) && (
-            <div className={b('main-menu')}>
-                {pcNavigationData.leftItemsWithIconSize && (
-                    <NavigationList
-                        items={pcNavigationData.leftItemsWithIconSize}
-                        itemClassName={b('main-menu-item')}
-                        column={ItemColumnName.Top}
-                        onActiveItemChange={pcNavigationData.onActiveItemChange}
-                        menuLayout={NavigationLayout.Mobile}
-                    />
-                )}
-                {pcNavigationData.rightItemsWithIconSize && (
-                    <NavigationList
-                        items={pcNavigationData.rightItemsWithIconSize}
-                        itemClassName={b('main-menu-item')}
-                        column={ItemColumnName.Bottom}
-                        onActiveItemChange={pcNavigationData.onActiveItemChange}
-                        menuLayout={NavigationLayout.Mobile}
-                    />
-                )}
-            </div>
-        );
+    const withoutToc =
+        !navigationTocData ||
+        !navigationTocData.toc ||
+        (typeof navigationTocData.toc.items.length === 'number' &&
+            navigationTocData.toc.items.length === 0);
+
+    const mainMenu = pcNavigationData && (mainMenuIsOpened || withoutToc) && (
+        <div className={b('main-menu')}>
+            {pcNavigationData.leftItemsWithIconSize && (
+                <NavigationList
+                    items={pcNavigationData.leftItemsWithIconSize}
+                    itemClassName={b('main-menu-item')}
+                    column={ItemColumnName.Top}
+                    onActiveItemChange={pcNavigationData.onActiveItemChange}
+                    menuLayout={NavigationLayout.Mobile}
+                />
+            )}
+            {pcNavigationData.rightItemsWithIconSize && (
+                <NavigationList
+                    items={pcNavigationData.rightItemsWithIconSize}
+                    itemClassName={b('main-menu-item')}
+                    column={ItemColumnName.Bottom}
+                    onActiveItemChange={pcNavigationData.onActiveItemChange}
+                    menuLayout={NavigationLayout.Mobile}
+                />
+            )}
+        </div>
+    );
 
     const data = mobileControlsData;
     const mobileControls = data && (