fix: menu extra slots

examples/App.vue

 <template>
-  <a-config-provider :get-popup-container="getPopupContainer">
+  <a-config-provider>
     <router-view />
   </a-config-provider>
 </template>

examples/layouts/BasicLayout.vue

@@ -15,7 +15,13 @@
     </template>
     <!-- custom right-content -->
     <template #rightContentRender>
-      <span style="color: #0f0; margin-right: 12px"><a-avatar /></span>
+      <div style="margin-right: 12px">
+        <a-avatar shape="square" size="small">
+          <template #icon>
+            <UserOutlined />
+          </template>
+        </a-avatar>
+      </div>
     </template>
     <!-- custom breadcrumb itemRender  -->
     <template #breadcrumbRender="{ route, params, routes }">
@@ -26,6 +32,35 @@
         {{ route.breadcrumbName }}
       </router-link>
     </template>
+    <template #menuExtraRender="{ collapsed }">
+      <a-input-search v-if="!collapsed" />
+    </template>
+    <template #menuFooterRender>
+      <a
+        :style="{
+          lineHeight: '48rpx',
+          display: 'flex',
+          height: '48px',
+          alignItems: 'center',
+        }"
+        href="https://preview.pro.antdv.com/dashboard/analysis"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <img
+          alt="pro-logo"
+          src="https://procomponents.ant.design/favicon.ico"
+          :style="{
+            width: '16px',
+            height: '16px',
+            margin: '0 16px',
+            marginRight: '10px',
+          }"
+        />
+        <span v-if="!baseState.collapsed">Preview Pro</span>
+      </a>
+    </template>
+
     <!-- content begin -->
     <router-view />
     <!-- content end -->
@@ -58,7 +93,7 @@
 <script lang="ts">
 import { computed, defineComponent, reactive, ref, watchEffect } from 'vue';
 import { useRouter } from 'vue-router';
-import { Button, Switch, Select, Avatar, Space, Badge, Menu } from 'ant-design-vue';
+import { Button, Input, Switch, Select, Avatar, Space, Badge } from 'ant-design-vue';
 import { getMenuData, clearMenuItem, FooterToolbar } from '@ant-design-vue/pro-layout';
 import type { RouteContextProps } from '@ant-design-vue/pro-layout';
 
@@ -69,6 +104,8 @@ export default defineComponent({
   components: {
     FooterToolbar,
     [Button.name]: Button,
+    [Input.name]: Input,
+    [Input.Search.name]: Input.Search,
     [Switch.name]: Switch,
     [Select.name]: Select,
     [Select.Option.displayName!]: Select.Option,
@@ -96,7 +133,8 @@ export default defineComponent({
       // title: 'ProLayout',
       // logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg',
       navTheme: 'dark',
-      layout: 'mix',
+      layout: 'side',
+      fixSiderbar: true,
     });
     const breadcrumb = computed(() =>
       router.currentRoute.value.matched.concat().map(item => {

examples/main.ts

 import 'ant-design-vue/es/style';
-import { ConfigProvider } from 'ant-design-vue';
+import { ConfigProvider, Button } from 'ant-design-vue';
 
 import { createApp } from 'vue';
 import router from './router';
 import icons from './icons';
 import App from './App.vue';
 
-// import '../dist/style.less';
 import ProLayout, { PageContainer } from '../src'; // '../dist/pro-layout.es';
 
 const app = createApp(App);
 app.use(router);
 app.use(icons);
 app.use(ConfigProvider);
+app.use(Button);
 app.use(ProLayout);
 app.use(PageContainer);
 app.mount('#app');

examples/views/page2.vue

@@ -4,20 +4,33 @@
       <a-tag>tag1</a-tag>
       <a-tag color="pink">tag2</a-tag>
     </template>
-    <span>page2</span>
+    <a-result
+      status="404"
+      :style="{
+        height: '100%',
+        background: '#fff',
+      }"
+      title="Hello World"
+      sub-title="Sorry, you are not authorized to access this page."
+    >
+      <template #extra>
+        <a-button type="primary">Back Home</a-button>
+      </template>
+    </a-result>
   </PageContainer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { Tag } from 'ant-design-vue';
+import { Tag, Result } from 'ant-design-vue';
 
 export default defineComponent({
   components: {
     [Tag.name]: Tag,
+    [Result.name]: Result,
   },
   setup() {
-    return {}
+    return {};
   },
-})
+});
 </script>

package.json

 {
   "name": "@ant-design-vue/pro-layout",
-  "version": "3.1.0-alpha.10",
+  "version": "3.1.0-beta.1",
   "license": "MIT",
   "files": [
     "dist",

src/BasicLayout.tsx

@@ -188,7 +188,9 @@ const ProLayout = defineComponent({
       const headerContentRender = getPropsSlot(slots, props, 'headerContentRender');
       const rightContentRender = getPropsSlot(slots, props, 'rightContentRender');
       const customHeaderRender = getPropsSlot(slots, props, 'headerRender');
-      const menuHeaderRender = getPropsSlot(slots, props, 'menuHeaderRender');
+      const menuHeaderRender = getPropsSlotfn(slots, props, 'menuHeaderRender');
+      const menuExtraRender = getPropsSlotfn(slots, props, 'menuExtraRender');
+      const menuFooterRender = getPropsSlotfn(slots, props, 'menuFooterRender');
       const footerRender = getPropsSlot(slots, props, 'footerRender');
       // menu render
       const menuItemRender = getPropsSlotfn(slots, props, 'menuItemRender');
@@ -235,6 +237,8 @@ const ProLayout = defineComponent({
                     {...menuRenders}
                     isMobile={isMobile.value}
                     menuHeaderRender={menuHeaderRender}
+                    menuExtraRender={menuExtraRender}
+                    menuFooterRender={menuFooterRender}
                     collapsedButtonRender={collapsedButtonRender}
                     onCollapse={onCollapse}
                     onSelect={onSelect}

src/SiderMenu/SiderMenu.tsx

@@ -267,8 +267,13 @@ const SiderMenu: FC<SiderMenuProps> = (props: SiderMenuProps) => {
             {headerDom}
           </div>
         )}
-        {extraDom && (
-          <div class={`${baseClassName}-extra ${!headerDom && `${baseClassName}-extra-no-logo`}`}>
+        {extraDom && !props.collapsed && (
+          <div
+            class={{
+              [`${baseClassName}-extra`]: true,
+              [`${baseClassName}-extra-no-logo`]: !headerDom,
+            }}
+          >
             {extraDom}
           </div>
         )}

src/SiderMenu/index.less

@@ -9,9 +9,7 @@
   background-color: @layout-sider-background;
   border-right: 0;
   box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
-  transition: background-color 0.3s
-    /* , min-width 0.3s,
-    max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) */;
+  transition: all 0.2s;
   z-index: 100;
 
   &.@{ant-prefix}-menu-vertical .@{ant-prefix}-menu-item:not(:last-child),