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
-            <div ref={sidebarSwitchRef} style={{ marginRight: open ? 0 : 20 }}>
+            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',
     },

apps/electron/src/main/main-window.ts

@@ -38,7 +38,7 @@ async function createWindow() {
       : isWindows()
       ? 'hidden'
       : 'default',
-    trafficLightPosition: { x: 20, y: 18 },
+    trafficLightPosition: { x: 20, y: 16 },
     x: mainWindowState.x,
     y: mainWindowState.y,
     width: mainWindowState.width,

packages/component/src/components/app-sidebar/index.css.ts

@@ -45,6 +45,18 @@ export const navWrapperStyle = style({
   },
 });
 
+export const navHeaderButton = style({
+  width: '32px',
+  height: '32px',
+  flexShrink: 0,
+});
+
+export const navHeaderNavigationButtons = style({
+  display: 'flex',
+  alignItems: 'center',
+  columnGap: '32px',
+});
+
 export const navStyle = style({
   position: 'relative',
   width: '100%',
@@ -61,11 +73,10 @@ export const navHeaderStyle = style({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  gap: '32px',
   WebkitAppRegion: 'drag',
   selectors: {
     '&[data-is-macos-electron="true"]': {
-      justifyContent: 'flex-end',
+      paddingLeft: '90px',
     },
   },
 } as ComplexStyleRule);

packages/component/src/components/app-sidebar/sidebar-header/index.tsx

@@ -3,7 +3,11 @@ import { IconButton } from '@toeverything/components/button';
 import { useAtomValue } from 'jotai';
 
 import type { History } from '..';
-import { navHeaderStyle } from '../index.css';
+import {
+  navHeaderButton,
+  navHeaderNavigationButtons,
+  navHeaderStyle,
+} from '../index.css';
 import { appSidebarOpenAtom } from '../index.jotai';
 import { SidebarSwitch } from './sidebar-switch';
 
@@ -18,15 +22,16 @@ export type SidebarHeaderProps = {
 export const SidebarHeader = (props: SidebarHeaderProps) => {
   const open = useAtomValue(appSidebarOpenAtom);
   return (
-    <div className={navHeaderStyle} data-open={open}>
+    <div
-      {environment.isDesktop && environment.isMacOs && (
+      className={navHeaderStyle}
-        <div style={{ flex: 1 }} />
+      data-open={open}
-      )}
+      data-is-macos-electron={environment.isDesktop && environment.isMacOs}
+    >
       <SidebarSwitch show={open} />
       {environment.isDesktop && (
-        <>
+        <div className={navHeaderNavigationButtons}>
-          {!environment.isMacOs && <div style={{ flex: 1 }} />}
           <IconButton
+            className={navHeaderButton}
             data-testid="app-sidebar-arrow-button-back"
             disabled={props.router?.history.current === 0}
             onClick={() => {
@@ -36,6 +41,7 @@ export const SidebarHeader = (props: SidebarHeaderProps) => {
             <ArrowLeftSmallIcon />
           </IconButton>
           <IconButton
+            className={navHeaderButton}
             data-testid="app-sidebar-arrow-button-forward"
             disabled={
               props.router
@@ -50,7 +56,7 @@ export const SidebarHeader = (props: SidebarHeaderProps) => {
           >
             <ArrowRightSmallIcon />
           </IconButton>
-        </>
+        </div>
       )}
     </div>
   );

packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.css.ts

@@ -5,11 +5,12 @@ export const sidebarSwitch = style({
   width: 0,
   overflow: 'hidden',
   pointerEvents: 'none',
-  transition: 'opacity .3s ease-in-out',
+  transition: 'all .3s ease-in-out',
   selectors: {
     '&[data-show=true]': {
       opacity: 1,
       width: '32px',
+      flexShrink: 0,
       pointerEvents: 'auto',
     },
   },