fix: header ui styles (#4156)

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}>
-      {environment.isDesktop && environment.isMacOs && (
-        <div style={{ flex: 1 }} />
-      )}
+    <div
+      className={navHeaderStyle}
+      data-open={open}
+      data-is-macos-electron={environment.isDesktop && environment.isMacOs}
+    >
       <SidebarSwitch show={open} />
       {environment.isDesktop && (
-        <>
-          {!environment.isMacOs && <div style={{ flex: 1 }} />}
+        <div className={navHeaderNavigationButtons}>
           <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',
     },
   },