fix: get isMobile props from RouteContext

src/BasicLayout.tsx

@@ -9,6 +9,7 @@ import { default as Header, HeaderViewProps } from './Header';
 import { RenderVNodeType, WithFalse } from './typings';
 import { getComponentOrSlot, PropRenderType, PropTypes } from './utils';
 import './BasicLayout.less';
+import { useRouteContext } from './RouteContext';
 
 const defaultI18nRender = (key: string) => key;
 
@@ -60,9 +61,10 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
     matchMenuKeys,
     navTheme,
     menuData,
-    isMobile,
     // defaultCollapsed,
   } = props;
+  const routeContext = useRouteContext();
+  const { isMobile } = routeContext;
   const isTop = computed(() => layout === 'top');
   // const isSide = computed(() => layout === 'side');
   // const isMix = computed(() => layout === 'mix');

src/GlobalHeader/index.tsx

@@ -13,6 +13,7 @@ import { clearMenuItem } from '../utils';
 import type { HeaderViewProps } from '../Header';
 import './index.less';
 import { useProProvider } from '../ProProvider';
+import { useRouteContext } from '../RouteContext';
 
 export interface GlobalHeaderProps extends Partial<PureSettings> {
   collapsed?: boolean;
@@ -51,7 +52,6 @@ export const GlobalHeader: FunctionalComponent<GlobalHeaderProps & PrivateSiderM
   { slots },
 ) => {
   const {
-    isMobile,
     logo,
     collapsed,
     onCollapse,
@@ -66,6 +66,8 @@ export const GlobalHeader: FunctionalComponent<GlobalHeaderProps & PrivateSiderM
     menuData,
     prefixCls: customPrefixCls,
   } = props;
+  const routeContext = useRouteContext();
+  const { isMobile } = routeContext;
   const { getPrefixCls } = useProProvider();
   const prefixCls = customPrefixCls || getPrefixCls();
   const baseClassName = computed(() => `${prefixCls}-global-header`);

src/Header.tsx

@@ -68,7 +68,6 @@ export const HeaderView = defineComponent({
       prefixCls,
       headerRender,
       headerContentRender,
-      isMobile,
       fixedHeader,
       hasSiderMenu,
       headerHeight,
@@ -77,10 +76,11 @@ export const HeaderView = defineComponent({
       onCollapse,
     } = toRefs(props);
     const context = useRouteContext();
+    const { isMobile } = context;
     const needFixedHeader = computed(() => fixedHeader.value || layout.value === 'mix');
     const isTop = computed(() => layout.value === 'top');
     const needSettingWidth = computed(
-      () => needFixedHeader.value && hasSiderMenu.value && !isTop.value && !isMobile.value,
+      () => needFixedHeader.value && hasSiderMenu.value && !isTop.value && !isMobile,
     );
     // cache menu
     const clearMenuData = computed(
@@ -99,7 +99,7 @@ export const HeaderView = defineComponent({
           {headerContentRender && headerContentRender.value && headerContentRender.value(props)}
         </GlobalHeader>
       );
-      if (isTop.value && !isMobile.value) {
+      if (isTop.value && !isMobile) {
         defaultDom = (
           <TopNavHeader
             theme={navTheme.value as 'light' | 'dark'}

src/SiderMenu/index.tsx

@@ -4,11 +4,14 @@ import 'ant-design-vue/es/drawer/style';
 import Drawer from 'ant-design-vue/es/drawer';
 
 import SiderMenu, { SiderMenuProps, PrivateSiderMenuProps } from './SiderMenu';
+import { useRouteContext } from '../RouteContext';
 
 export type SiderMenuWrapperProps = SiderMenuProps & Partial<PrivateSiderMenuProps>;
 
 const SiderMenuWrapper: FunctionalComponent<SiderMenuWrapperProps> = props => {
-  return props.isMobile ? (
+  const routeContext = useRouteContext();
+  const { isMobile } = routeContext;
+  return isMobile ? (
     <Drawer>
       <SiderMenu {...props} />
     </Drawer>