fix: bug with mobile mini-toc closing (#296)

* fix: miniToc close animation, pc-desktop-navigation dropdowns style --------- Co-authored-by: Ruslan Bagautdinov <bagautdinovrl@yandex-team.ru>
diplodoc-platform · Sep 20, 2024 · f9e141c · f9e141c
1 parent 8a19220
commit f9e141c
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 26 deletions.
diff --git a/src/components/SubNavigation/SubNavigation.scss b/src/components/SubNavigation/SubNavigation.scss
@@ -59,7 +59,6 @@
             box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
             background: var(--g-color-base-background);
 
-            transition: max-height 300ms 0s;
             overflow-y: hidden;
 
             will-change: max-height;
@@ -70,6 +69,7 @@
 
             &_open {
                 max-height: 100vh;
+                transition: max-height 300ms 0s;
             }
         }
     }

diff --git a/src/components/SubNavigation/hooks/useMiniTocData.ts b/src/components/SubNavigation/hooks/useMiniTocData.ts
@@ -1,40 +1,18 @@
 import {useCallback, useMemo, useState} from 'react';
 
-const useMiniTocData = (
-    pageTitle: string,
-    hideMiniToc: boolean,
-    menuOpen: boolean,
-    // setVisibility: (event: boolean) => void,
-    // onMiniTocItemClick?: (event: MouseEvent) => void,
-) => {
+const useMiniTocData = (pageTitle: string, hideMiniToc: boolean, menuOpen: boolean) => {
     const [miniTocOpen, setMiniTocOpen] = useState(false);
     const [activeMiniTocTitle, setMiniTocTitle] = useState(pageTitle);
 
     const closeMiniToc = useCallback(() => setMiniTocOpen(false), []);
 
-    // const onItemClick = (event: MouseEvent) => {
-    //     if (onMiniTocItemClick) {
-    //         onMiniTocItemClick(event);
-    //     }
-
-    //     setTimeout(() => {
-    //         setVisibility(false);
-    //         closeMiniToc();
-    //     }, 0);
-    // };
-
     const onActiveItemTitleChange = (title: string) => setMiniTocTitle(title);
 
     const toggleMiniTocOpen = useCallback(() => {
         const newState = !miniTocOpen;
 
-        // if (newState) {
-        //     setVisibility(true);
-        // }
-
         setMiniTocOpen(newState);
     }, [miniTocOpen]);
-    // }, [miniTocOpen, setVisibility]);
 
     const miniTocHandler = useMemo(() => {
         if (hideMiniToc || menuOpen) {
@@ -49,7 +27,6 @@ const useMiniTocData = (
         activeMiniTocTitle,
         closeMiniToc,
         miniTocHandler,
-        // onItemClick,
         onActiveItemTitleChange,
     };
 };

diff --git a/src/components/navigation/MobileDropdown/MobileDropdown.scss b/src/components/navigation/MobileDropdown/MobileDropdown.scss
@@ -42,7 +42,7 @@
         display: none;
 
         .pc-navigation-item:has(&) {
-            width: 0;
+            display: none;
         }
     }
 }