feat: add disable collapsedButtonRender props

examples/layouts/BasicLayout.vue

@@ -5,6 +5,9 @@
     v-model:openKeys="baseState.openKeys"
     v-bind="state"
   >
+    <template #collapsedButtonRender>
+      <a-button>abc</a-button>
+    </template>
     <!-- custom right-content -->
     <template #rightContentRender>
       <span style="color: #0f0">right</span>

package.json

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

src/BasicLayout.tsx

@@ -47,6 +47,10 @@ export const basicLayoutProps = {
     type: [Object, Function] as PropType<BreadcrumbProps>,
     default: () => null,
   },
+  collapsedButtonRender: {
+    type: [Function, Object, Boolean] as PropType<WithFalse<(collapsed?: boolean) => CustomRender>>,
+    default: () => undefined,
+  },
   breadcrumbRender: {
     type: [Object, Function, Boolean] as PropType<WithFalse<BreadcrumbProps['itemRender']>>,
     default: () => {},
@@ -154,6 +158,8 @@ const ProLayout = defineComponent({
       }
       return <Header {...p} matchMenuKeys={matchMenuKeys || []} />;
     };
+
+    const collapsedButtonRender = getPropsSlot(slots, props, 'collapsedButtonRender');
     const rightContentRender = getPropsSlot(slots, props, 'rightContentRender');
     const customHeaderRender = getPropsSlot(slots, props, 'headerRender');
     const menuHeaderRender = getPropsSlot(slots, props, 'menuHeaderRender');
@@ -161,6 +167,8 @@ const ProLayout = defineComponent({
     // const menuRender = getPropsSlot(slots, props, 'menuRender');
     const breadcrumbRender = getPropsSlot(slots, props, 'breadcrumbRender');
 
+    console.log('collapsedButtonRender', collapsedButtonRender);
+    console.log('rightContentRender', rightContentRender);
     const headerDom = computed(() =>
       headerRender(
         {
@@ -222,6 +230,7 @@ const ProLayout = defineComponent({
                   {...restProps.value}
                   isMobile={isMobile.value}
                   menuHeaderRender={menuHeaderRender}
+                  collapsedButtonRender={collapsedButtonRender}
                   onCollapse={onCollapse}
                   onSelect={onSelect}
                   onOpenKeys={onOpenKeys}

src/SiderMenu/SiderMenu.tsx

@@ -59,7 +59,7 @@ export const siderMenuProps = {
     default: () => undefined,
   },
   collapsedButtonRender: {
-    type: [Function, Object] as PropType<WithFalse<(collapsed?: boolean) => CustomRender>>,
+    type: [Function, Object, Boolean] as PropType<WithFalse<(collapsed?: boolean) => CustomRender>>,
     default: () => undefined,
   },
   breakpoint: {
@@ -258,28 +258,32 @@ const SiderMenu: FC<SiderMenuProps> = (props: SiderMenuProps) => {
           {(menuContentRender && menuContentRender(props, defaultMenuDom)) || defaultMenuDom}
         </div>
         <div class={`${baseClassName}-links`}>
-          <Menu
-            class={`${baseClassName}-link-menu`}
-            inlineIndent={16}
-            theme={sTheme.value as 'light' | 'dark'}
-            selectedKeys={[]}
-            openKeys={[]}
-            mode="inline"
-            // @ts-ignore
-            onClick={() => {
-              if (onCollapse) {
-                onCollapse(!props.collapsed);
-              }
-            }}
-          >
-            <Menu.Item
-              key={'collapsed-button'}
-              class={`${baseClassName}-collapsed-button`}
-              title={false}
+          {collapsedButtonRender !== false ? (
+            <Menu
+              class={`${baseClassName}-link-menu`}
+              inlineIndent={16}
+              theme={sTheme.value as 'light' | 'dark'}
+              selectedKeys={[]}
+              openKeys={[]}
+              mode="inline"
+              // @ts-ignore
+              onClick={() => {
+                if (onCollapse) {
+                  onCollapse(!props.collapsed);
+                }
+              }}
             >
-              {collapsedButtonRender && collapsedButtonRender(collapsed)}
-            </Menu.Item>
-          </Menu>
+              <Menu.Item
+                key={'collapsed-button'}
+                class={`${baseClassName}-collapsed-button`}
+                title={false}
+              >
+                {collapsedButtonRender && typeof collapsedButtonRender === 'function'
+                  ? collapsedButtonRender(collapsed)
+                  : collapsedButtonRender}
+              </Menu.Item>
+            </Menu>
+          ) : null}
         </div>
         {menuFooterRender && <div class={`${baseClassName}-footer`}>{menuFooterRender(props)}</div>}
       </Sider>