fix: header ui styles (#4156)

apps/core/src/components/pure/header/index.tsx

@@ -64,8 +64,14 @@ export const Header = forwardRef<HTMLDivElement, HeaderPros>(function Header(
             block: isTinyScreen,
           })}
         >
-          <div className={clsx(style.headerItem, 'top-item')}>
-            <div ref={sidebarSwitchRef} style={{ marginRight: open ? 0 : 20 }}>
+          <div
+            className={clsx(
+              style.headerItem,
+              'top-item',
+              !open ? 'top-item-visible' : ''
+            )}
+          >
+            <div ref={sidebarSwitchRef}>
               <SidebarSwitch show={!open} />
             </div>
           </div>

apps/core/src/components/pure/header/style.css.tsx

@@ -34,6 +34,9 @@ export const headerItem = style({
     '&.top-item': {
       height: '52px',
     },
+    '&.top-item-visible': {
+      marginRight: '20px',
+    },
     '&.left': {
       justifyContent: 'left',
     },