fix: collapsedButtonRender not reactive

examples/layouts/BasicLayout.vue

@@ -13,6 +13,11 @@
         <h1>Pro Layout</h1>
       </a>
     </template>
+    <!-- custom collapsed button -->
+    <template #collapsedButtonRender="collapsed">
+      <HeartOutlined v-if="collapsed" />
+      <SmileOutlined v-else />
+    </template>
     <!-- custom right-content -->
     <template #rightContentRender>
       <div style="margin-right: 12px">
@@ -133,7 +138,7 @@ export default defineComponent({
       // title: 'ProLayout',
       // logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg',
       navTheme: 'dark',
-      layout: 'side',
+      layout: 'top',
       fixSiderbar: true,
     });
     const breadcrumb = computed(() =>

src/BasicLayout.tsx

@@ -170,7 +170,6 @@ const ProLayout = defineComponent({
     });
     provideRouteContext(routeContext);
     return () => {
-      // const { onCollapse, onOpenKeys, onSelect, onMenuClick, menuHeaderRender, ...restProps } = props;
 
       const {
         pure,
@@ -181,10 +180,7 @@ const ProLayout = defineComponent({
         ...restProps
       } = props;
 
-      const collapsedButtonRender =
-        props.collapsedButtonRender === false
-          ? false
-          : getPropsSlot(slots, props, 'collapsedButtonRender');
+      const collapsedButtonRender = getPropsSlotfn(slots, props, 'collapsedButtonRender');
       const headerContentRender = getPropsSlot(slots, props, 'headerContentRender');
       const rightContentRender = getPropsSlot(slots, props, 'rightContentRender');
       const customHeaderRender = getPropsSlot(slots, props, 'headerRender');
@@ -213,6 +209,7 @@ const ProLayout = defineComponent({
             onSelect,
             onMenuHeaderClick,
             rightContentRender,
+            collapsedButtonRender,
             headerTitleRender: menuHeaderRender,
             headerContentRender,
             headerRender: customHeaderRender,
@@ -231,7 +228,7 @@ const ProLayout = defineComponent({
           ) : (
             <div class={className.value}>
               <Layout class={baseClassName.value}>
-                {!isTop.value && (
+                {(!isTop.value || isMobile.value) && (
                   <SiderMenuWrapper
                     {...restProps}
                     {...menuRenders}

src/GlobalHeader/index.tsx

@@ -30,17 +30,15 @@ const renderLogo = (
   return logoDom;
 };
 
-export const GlobalHeader: FunctionalComponent<GlobalHeaderProps> = (props, { slots }) => {
+export const GlobalHeader: FunctionalComponent<GlobalHeaderProps> = (props, { slots, emit }) => {
   const {
     isMobile,
     logo,
     collapsed,
-    onCollapse,
     collapsedButtonRender = defaultRenderCollapsedButton,
     rightContentRender,
     menuHeaderRender,
     onMenuHeaderClick,
-    // className: propClassName,
     layout,
     headerTheme = 'dark',
     splitMenus,
@@ -78,6 +76,9 @@ export const GlobalHeader: FunctionalComponent<GlobalHeaderProps> = (props, { sl
       <a>{defaultRenderLogo(logo)}</a>
     </span>
   );
+  const onCollapse = () => {
+    emit('collapse', !props.collapsed)
+  }
 
   return (
     <div class={className.value}>
@@ -85,11 +86,7 @@ export const GlobalHeader: FunctionalComponent<GlobalHeaderProps> = (props, { sl
       {isMobile && collapsedButtonRender && (
         <span
           class={`${baseClassName.value}-collapsed-button`}
-          onClick={() => {
-            if (onCollapse) {
-              onCollapse(!collapsed);
-            }
-          }}
+          onClick={onCollapse}
         >
           {collapsedButtonRender(collapsed)}
         </span>
@@ -108,4 +105,5 @@ export const GlobalHeader: FunctionalComponent<GlobalHeaderProps> = (props, { sl
     </div>
   );
 };
+GlobalHeader.inheritAttrs = false
 GlobalHeader.emits = ['menuHeaderClick', 'collapse', 'openKeys', 'select'];

src/SiderMenu/SiderMenu.tsx

@@ -196,7 +196,6 @@ const SiderMenu: FC<SiderMenuProps> = (props: SiderMenuProps) => {
   // call menuHeaderRender
   const headerDom = defaultRenderLogoAndTitle(props);
   const extraDom = menuExtraRender && menuExtraRender(props);
-
   if (hasSplitMenu.value && flatMenuData.value.length === 0) {
     return null;
   }

src/utils/index.ts

@@ -61,6 +61,10 @@ export function getPropsSlot(slots: Slots, props: Record<string, any>, prop = 'd
 }
 
 export function getPropsSlotfn(slots: Slots, props: Record<string, any>, prop = 'default') {
+  if (props[prop] === false) {
+    // force not render
+    return false;
+  }
   return props[prop] || slots[prop];
 }