🐛 Fixed bug of collapsed menu wrong mode responsively

close #13104

components/menu/index.tsx

@@ -52,6 +52,7 @@ export interface MenuProps {
   subMenuOpenDelay?: number;
   getPopupContainer?: (triggerNode: Element) => HTMLElement;
   focusable?: boolean;
+  onMouseEnter?: (e: MouseEvent) => void;
 }
 
 export interface MenuState {
@@ -138,6 +139,16 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
       this.setState({});
     }
   }
+  // Restore vertical mode when menu is collapsed responsively when mounted
+  // https://github.com/ant-design/ant-design/issues/13104
+  // TODO: not a perfect solution, looking a new way to avoid setting switchingModeFromInline in this situation
+  handleMouseEnter = (e: MouseEvent) => {
+    this.restoreModeVerticalFromInline();
+    const { onMouseEnter } = this.props;
+    if (onMouseEnter) {
+      onMouseEnter(e);
+    }
+  }
   handleTransitionEnd = (e: TransitionEvent) => {
     // when inlineCollapsed menu width animation finished
     // https://github.com/ant-design/ant-design/issues/12864
@@ -252,6 +263,7 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
         {...this.props}
         {...menuProps}
         onTransitionEnd={this.handleTransitionEnd}
+        onMouseEnter={this.handleMouseEnter}
       />
     );
   }