Merge pull request #5062 from weseek/fix/init-subnavigation-when-sticking

fix: Subnavigation sticking initialization

packages/app/src/components/Navbar/GrowiSubNavigationSwitcher.jsx

@@ -32,7 +32,7 @@ const GrowiSubNavigationSwitcher = (props) => {
   const fixedContainerRef = useRef();
   const stickyEvents = useMemo(() => new StickyEvents({ stickySelector: '#grw-subnav-sticky-trigger' }), []);
 
-  const resetWidth = useCallback(() => {
+  const initWidth = useCallback(() => {
     const instance = fixedContainerRef.current;
 
     if (instance == null || instance.parentNode == null) {
@@ -45,9 +45,22 @@ const GrowiSubNavigationSwitcher = (props) => {
     setWidth(clientWidth);
   }, []);
 
+  const initVisible = useCallback(() => {
+    const elements = stickyEvents.stickyElements;
+
+    for (const elem of elements) {
+      const bool = stickyEvents.isSticking(elem);
+      if (bool) {
+        setVisible(bool);
+        break;
+      }
+    }
+
+  }, [stickyEvents]);
+
   // setup effect by resizing event
   useEffect(() => {
-    const resizeHandler = debounce(100, resetWidth);
+    const resizeHandler = debounce(100, initWidth);
 
     window.addEventListener('resize', resizeHandler);
 
@@ -55,7 +68,7 @@ const GrowiSubNavigationSwitcher = (props) => {
     return () => {
       window.removeEventListener('resize', resizeHandler);
     };
-  }, [resetWidth]);
+  }, [initWidth]);
 
   const stickyChangeHandler = useCallback((event) => {
     logger.debug('StickyEvents.CHANGE detected');
@@ -79,19 +92,20 @@ const GrowiSubNavigationSwitcher = (props) => {
   // update width when sidebar collapsing changed
   useEffect(() => {
     if (isSidebarCollapsed != null) {
-      setTimeout(resetWidth, 300);
+      setTimeout(initWidth, 300);
     }
-  }, [isSidebarCollapsed, resetWidth]);
+  }, [isSidebarCollapsed, initWidth]);
 
   // initialize
   useEffect(() => {
-    resetWidth();
-    setTimeout(() => {
-      stickyEvents.state.values((sticky) => {
-        setVisible(sticky.isSticky);
-      });
-    }, 100);
-  }, [resetWidth, stickyEvents]);
+    initWidth();
+
+    // check sticky state several times
+    setTimeout(initVisible, 100);
+    setTimeout(initVisible, 300);
+    setTimeout(initVisible, 2000);
+
+  }, [initWidth, initVisible]);
 
   return (
     <div className={`grw-subnav-switcher ${isVisible ? '' : 'grw-subnav-switcher-hidden'}`}>