fix: mobile sider menu

examples/src/layouts/BasicLayout.jsx

@@ -68,11 +68,13 @@ export default {
       // 媒体查询
       query: {},
       // 布局类型
-      layout: 'sidemenu', // 'sidemenu', 'topmenu'
+      layout: 'topmenu', // 'sidemenu', 'topmenu'
       // 定宽: true / 流式: false
       contentWidth: true,
       // 主题 'dark' | 'light'
-      theme: 'dark'
+      theme: 'light',
+      // 是否手机模式
+      isMobile: false
     }
   },
   render (h) {
@@ -86,6 +88,14 @@ export default {
 
     const handleMediaQuery = (val) => {
       this.query = val
+      if (this.isMobile && !val['screen-xs']) {
+        this.isMobile = false
+        return
+      }
+      if (!this.isMobile && val['screen-xs']) {
+        this.isMobile = true
+        this.collapsed = false
+      }
     }
     const handleCollapse = (val) => {
       this.collapsed = val
@@ -103,6 +113,7 @@ export default {
         layout,
         contentWidth,
         theme,
+        isMobile: this.isMobile,
         rightContentRender,
         footerRender,
         i18nRender,

examples/src/views/TestPage.vue

@@ -45,7 +45,8 @@ export default {
 
 <style lang="less" scoped>
 .page-test-wrapper {
-  width: 400px;
+  width: 100%;
+  max-width: 400px;
   margin: 0 auto;
 }
 </style>

examples/src/views/TestPage2.vue

@@ -31,7 +31,8 @@ export default {
 
 <style lang="less" scoped>
 .page-test-wrapper {
-  width: 400px;
+  width: 100%;
+  max-width: 400px;
   margin: 0 auto;
 }
 </style>

src/BasicLayout.jsx

@@ -97,17 +97,15 @@ const BasicLayout = {
       <div>
         <ContainerQuery query={MediaQueryEnum} onChange={handleMediaQuery}>
           <Layout class={{ 'basicLayout': true, ...mediaQuery }}>
-            {layout !== 'topmenu' && (
-              <SiderMenuWrapper
-                { ...{ props: props } }
-                menus={menus}
-                mode={'inline'}
-                logo={logo}
-                collapsed={collapsed}
-                onCollapse={handleCollapse}
-                handleCollapse={handleCollapse}
-              />
-            )}
+            <SiderMenuWrapper
+              { ...{ props: props } }
+              menus={menus}
+              mode={'inline'}
+              logo={logo}
+              collapsed={collapsed}
+              onCollapse={handleCollapse}
+              handleCollapse={handleCollapse}
+            />
             <Layout class={[layout]} style={{ paddingLeft: '0', minHeight: '100vh' }}>
               {headerRender(h, {
                 ...props,

src/Header.jsx

@@ -47,11 +47,10 @@ export const HeaderViewProps = {
 
 const renderContent = (h, props) => {
   const isTop = props.layout === 'topmenu'
-  const isMobile = false
   const maxWidth = 1200 - 280 - 120
   const contentWidth = props.contentWidth
   const baseCls = 'ant-pro-top-nav-header'
-  const { logo, title, theme, headerRender, rightContentRender } = props
+  const { logo, title, theme, isMobile, headerRender, rightContentRender } = props
   const rightContentProps = { theme }
   let defaultDom = <GlobalHeader {...{ props: props }} />
   if (isTop && !isMobile) {

src/Header.less

 @import "~ant-design-vue/es/style/themes/default";
 
-@global-header-prefix-cls: ~'@{ant-prefix}-pro-global-header';
 @top-nav-header-prefix-cls: ~'@{ant-prefix}-pro-top-nav-header';
 
-@pro-header-bg: @component-background;
-@pro-header-hover-bg: @component-background;
-@pro-header-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-
 .@{top-nav-header-prefix-cls} {
   position: relative;
   width: 100%;
@@ -77,85 +72,6 @@
   }
 }
 
-.@{global-header-prefix-cls} {
-  position: relative;
-  height: @layout-header-height;
-  padding: 0;
-  background: @pro-header-bg;
-  box-shadow: @pro-header-box-shadow;
-
-  &-index-right {
-    float: right;
-    height: 100%;
-    margin-left: auto;
-    overflow: hidden;
-
-    .@{global-header-prefix-cls}-index-action {
-      display: inline-block;
-      height: 100%;
-      padding: 0 12px;
-      cursor: pointer;
-      transition: all .3s;
-
-      &:hover {
-        background: rgba(0,0,0,.025);
-      }
-    }
-  }
-
-  &-logo {
-    display: inline-block;
-    height: @layout-header-height;
-    padding: 0 0 0 24px;
-    font-size: 20px;
-    line-height: @layout-header-height;
-    vertical-align: top;
-    cursor: pointer;
-    img {
-      display: inline-block;
-      width: 32px;
-      vertical-align: middle;
-    }
-  }
-
-  &-menu {
-    .anticon {
-      margin-right: 8px;
-    }
-    .ant-dropdown-menu-item {
-      min-width: 160px;
-    }
-  }
-
-  &-trigger {
-    height: @layout-header-height;
-    padding: ~'calc((@{layout-header-height} - 26px) / 2)' 24px;
-    font-size: 20px;
-    cursor: pointer;
-    transition: all 0.3s, padding 0s;
-    &:hover {
-      background: @pro-header-hover-bg;
-    }
-  }
-
-  .dark {
-    height: @layout-header-height;
-    .action {
-      color: rgba(255, 255, 255, 0.85);
-      > i {
-        color: rgba(255, 255, 255, 0.85);
-      }
-      &:hover,
-      &.opened {
-        background: @primary-color;
-      }
-      .ant-badge {
-        color: rgba(255, 255, 255, 0.85);
-      }
-    }
-  }
-}
-
 .drop-down {
   &.menu {
     .anticon {

src/components/GlobalHeader/index.jsx

-/* eslint-disable */
 import './index.less'
 
 import debounce from 'lodash/debounce'
@@ -74,7 +73,7 @@ const GlobalHeader = {
     return (
       <div class={headerCls}>
         {isMobile && (
-          <a class={`${headerCls}-logo`} key="logo">
+          <a class={`${headerCls}-logo`} key="logo" href={'/'}>
             {defaultRenderLogo(h, logo)}
           </a>
         )}
@@ -89,7 +88,7 @@ const GlobalHeader = {
     })
   },
   beforeDestroy () {
-    this.triggerResizeEvent.cancel()
+    this.triggerResizeEvent.cancel && this.triggerResizeEvent.cancel()
   }
 }
 

src/components/GlobalHeader/index.less

+@import "~ant-design-vue/es/style/themes/default";
+
+@global-header-prefix-cls: ~'@{ant-prefix}-pro-global-header';
+
+@pro-header-bg: @component-background;
+@pro-header-hover-bg: @component-background;
+@pro-header-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+@pro-header-hover-trigger-action-bg: rgba(0,0,0,.025);
+
+.@{global-header-prefix-cls} {
+    position: relative;
+    height: @layout-header-height;
+    padding: 0;
+    background: @pro-header-bg;
+    box-shadow: @pro-header-box-shadow;
+
+    &-index-right {
+        float: right;
+        height: 100%;
+        margin-left: auto;
+        overflow: hidden;
+
+        .@{global-header-prefix-cls}-index-action {
+            display: inline-block;
+            height: 100%;
+            padding: 0 12px;
+            cursor: pointer;
+            transition: all .3s;
+
+            &:hover {
+                background: @pro-header-hover-trigger-action-bg;
+            }
+        }
+    }
+
+    &-logo {
+        display: inline-block;
+        height: @layout-header-height;
+        padding: 0 0 0 24px;
+        font-size: 20px;
+        line-height: @layout-header-height;
+        vertical-align: top;
+        cursor: pointer;
+        img, svg {
+            display: inline-block;
+            width: 32px;
+            height: 32px;
+            vertical-align: middle;
+        }
+    }
+
+    &-menu {
+        .anticon {
+            margin-right: 8px;
+        }
+        .ant-dropdown-menu-item {
+            min-width: 160px;
+        }
+    }
+
+    &-trigger {
+        height: @layout-header-height;
+        padding: ~'calc((@{layout-header-height} - 26px) / 2)' 24px;
+        font-size: 20px;
+        cursor: pointer;
+        transition: all 0.3s, padding 0s;
+        &:hover {
+            background: @pro-header-hover-trigger-action-bg;
+        }
+    }
+
+    .dark {
+        height: @layout-header-height;
+        .action {
+            color: rgba(255, 255, 255, 0.85);
+            > i {
+                color: rgba(255, 255, 255, 0.85);
+            }
+            &:hover,
+            &.opened {
+                background: @primary-color;
+            }
+            .ant-badge {
+                color: rgba(255, 255, 255, 0.85);
+            }
+        }
+    }
 
-.ant-pro-global-header {
-    
     .ant-pro-global-header-index-action {
         i {
             color: rgba(0,0,0,.65);
             vertical-align: middle;
         }
     }
+
 }

src/components/SiderMenu/SiderMenuWrapper.jsx

@@ -10,10 +10,12 @@ const SiderMenuWrapper = {
   props: SiderMenuProps,
   render () {
     const {
+      layout,
       isMobile,
       collapsed,
       handleCollapse: onCollapse
     } = this
+    const isTopMenu = layout === 'topmenu'
     return isMobile ? (
       <Drawer
         class="ant-pro-sider-menu"
@@ -26,9 +28,9 @@ const SiderMenuWrapper = {
           height: '100vh'
         }}
       >
-        <SiderMenu {...{ props: this.$props }} collapsed={isMobile ? false : collapsed} />
+        <SiderMenu {...{ props: {...this.$props, collapsed: isMobile ? false : collapsed} }} />
       </Drawer>
-    ) : (
+    ) : !isTopMenu && (
       <SiderMenu class="ant-pro-sider-menu" {...{ props: this.$props }} />
     )
   }