fix(layout): set layout headermenu height to 40

ant-design · May 12, 2023 · f50cfd2 · f50cfd2
1 parent 307a84e
commit f50cfd2
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/packages/layout/src/components/TopNavHeader/style.ts b/packages/layout/src/components/TopNavHeader/style.ts
@@ -67,9 +67,10 @@ const genTopNavHeaderStyle: GenerateStyle<TopNavHeaderToken> = (token) => {
         alignItems: 'center',
         paddingInline: 6,
         paddingBlock: 6,
-        lineHeight: `${
-          (token?.layout?.header?.heightLayoutHeader || 56) - 12
-        }px`,
+        lineHeight: `${Math.max(
+          (token?.layout?.header?.heightLayoutHeader || 56) - 12,
+          40,
+        )}px`,
       },
     },
   };

diff --git a/packages/layout/src/demos/base.tsx b/packages/layout/src/demos/base.tsx
@@ -295,6 +295,11 @@ export default () => {
           location={{
             pathname,
           }}
+          token={{
+            header: {
+              colorBgMenuItemSelected: 'rgba(0,0,0,0.04)',
+            },
+          }}
           siderMenuType="group"
           menu={{
             collapsedShowGroupTitle: true,
@@ -323,6 +328,7 @@ export default () => {
           }}
           actionsRender={(props) => {
             if (props.isMobile) return [];
+            if (typeof document === 'undefined') return [];
             return [
               props.layout !== 'side' && document.body.clientWidth > 1400 ? (
                 <SearchInput />
@@ -339,6 +345,7 @@ export default () => {
                 {title}
               </a>
             );
+            if (typeof document === 'undefined') return defaultDom;
             if (document.body.clientWidth < 1400) {
               return defaultDom;
             }

diff --git a/packages/layout/src/demos/topMode.tsx b/packages/layout/src/demos/topMode.tsx
@@ -319,7 +319,10 @@ export default () => {
               {title}
             </a>
           );
-          if (document.body.clientWidth < 1400) {
+          if (
+            typeof document === 'undefined' ||
+            document.body.clientWidth < 1400
+          ) {
             return defaultDom;
           }
           if (_.isMobile) return defaultDom;