improve header display behavior

packages/app/src/components/Layout/header/index.jsx

@@ -22,6 +22,14 @@ export default (props) => {
         },
     })
 
+    React.useEffect(() => {
+        if (render) {
+            app.layout.toggleDisableTopLayoutPadding(true)
+        } else {
+            app.layout.toggleDisableTopLayoutPadding(false)
+        }
+    }, [render])
+
     return <Motion
         style={{
             y: spring(render ? 0 : 100,),

packages/app/src/components/Layout/header/index.less

@@ -31,6 +31,8 @@
     }
 
     &.hidden {
+        display: none;
+
         opacity: 0;
         height: 0;
         padding: 0;