Explorar el Código

fix: 修复navbar 的bug

BaiLuoYan hace 3 semanas
padre
commit
b2d29a59d2
Se han modificado 3 ficheros con 10 adiciones y 7 borrados
  1. 3 3
      src/components/Topbar/index.tsx
  2. 6 3
      src/components/Topbar/useAction.ts
  3. 1 1
      src/hooks/useSize.ts

+ 3 - 3
src/components/Topbar/index.tsx

@@ -29,7 +29,7 @@ const Topbar = memo(() => {
         toggleMobileMenu,
         toggleMobileMenu,
         closeMobileMenu,
         closeMobileMenu,
         handleMenuAnimationEnd,
         handleMenuAnimationEnd,
-        toggleOverflowMenu,
+        setOverflowMenuOpen,
         setMenuItemRef,
         setMenuItemRef,
     } = useAction({ menuItems, isMobile });
     } = useAction({ menuItems, isMobile });
 
 
@@ -86,14 +86,14 @@ const Topbar = memo(() => {
                                     <Dropdown
                                     <Dropdown
                                         menu={overflowMenuProps}
                                         menu={overflowMenuProps}
                                         open={isOverflowMenuOpen}
                                         open={isOverflowMenuOpen}
-                                        onOpenChange={toggleOverflowMenu}
+                                        onOpenChange={setOverflowMenuOpen}
                                         overlayClassName="topbar-overflow-menu"
                                         overlayClassName="topbar-overflow-menu"
                                         trigger={['click']}
                                         trigger={['click']}
                                         placement="bottomRight"
                                         placement="bottomRight"
                                     >
                                     >
                                         <button
                                         <button
+                                            type="button"
                                             className="px-5 py-2.5 rounded-[20px] transition-colors font-normal text-base leading-6 border-none bg-transparent text-white/80 hover:text-white flex items-center gap-1 whitespace-nowrap"
                                             className="px-5 py-2.5 rounded-[20px] transition-colors font-normal text-base leading-6 border-none bg-transparent text-white/80 hover:text-white flex items-center gap-1 whitespace-nowrap"
-                                            onClick={toggleOverflowMenu}
                                         >
                                         >
                                             <span>...</span>
                                             <span>...</span>
                                             <Icon
                                             <Icon

+ 6 - 3
src/components/Topbar/useAction.ts

@@ -63,6 +63,9 @@ export function useAction({ menuItems, isMobile }: UseActionParams) {
             }
             }
         }
         }
 
 
+        console.log('visible', visible);
+        console.log('overflow', overflow);
+
         setVisibleMenuItems(visible);
         setVisibleMenuItems(visible);
         setOverflowMenuItems(overflow);
         setOverflowMenuItems(overflow);
     }, [isMobile, menuItems]);
     }, [isMobile, menuItems]);
@@ -119,8 +122,8 @@ export function useAction({ menuItems, isMobile }: UseActionParams) {
         }
         }
     }, [isMobileMenuClosing]);
     }, [isMobileMenuClosing]);
 
 
-    const toggleOverflowMenu = useCallback(() => {
-        setIsOverflowMenuOpen((prev) => !prev);
+    const setOverflowMenuOpen = useCallback((open: boolean) => {
+        setIsOverflowMenuOpen(open);
     }, []);
     }, []);
 
 
     const setMenuItemRef = useCallback((itemName: string) => {
     const setMenuItemRef = useCallback((itemName: string) => {
@@ -145,7 +148,7 @@ export function useAction({ menuItems, isMobile }: UseActionParams) {
         toggleMobileMenu,
         toggleMobileMenu,
         closeMobileMenu,
         closeMobileMenu,
         handleMenuAnimationEnd,
         handleMenuAnimationEnd,
-        toggleOverflowMenu,
+        setOverflowMenuOpen,
         setMenuItemRef,
         setMenuItemRef,
     };
     };
 }
 }

+ 1 - 1
src/hooks/useSize.ts

@@ -67,5 +67,5 @@ const MOBILE_BREAKPOINT = 768;
  */
  */
 export function useResponsive() {
 export function useResponsive() {
     const { width } = useScreenSize();
     const { width } = useScreenSize();
-    return { isMobile: width < MOBILE_BREAKPOINT };
+    return { isMobile: width <= MOBILE_BREAKPOINT };
 }
 }