fix: some style issues to sidebar and switch (#4046)

Co-authored-by: Alex Yang <himself65@outlook.com>

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

@@ -33,7 +33,7 @@ export const navWrapperStyle = style({
       marginLeft: `calc(${navWidthVar} * -1)`,
     },
     '&[data-enable-animation="true"]': {
-      transition: 'margin-left .3s, width .3s',
+      transition: 'margin-left .3s .05s, width .3s .05s',
     },
     '&.has-background': {
       backgroundColor: 'var(--affine-white-60)',

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

@@ -102,8 +102,10 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
             (environment.isDesktop && props.hasBackground),
         })}
         data-open={open}
+        data-testid="app-sidebar-wrapper"
         data-is-macos-electron={isMacosDesktop}
         data-is-floating={appSidebarFloating}
+        data-has-background={props.hasBackground}
         data-enable-animation={enableAnimation && !isResizing}
       >
         <nav className={navStyle} ref={navRef} data-testid="app-sidebar">

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

@@ -19,10 +19,13 @@ export const SidebarHeader = (props: SidebarHeaderProps) => {
   const open = useAtomValue(appSidebarOpenAtom);
   return (
     <div className={navHeaderStyle} data-open={open}>
-      <div style={{ flex: 1 }} />
-      {open && <SidebarSwitch />}
+      {environment.isDesktop && environment.isMacOs && (
+        <div style={{ flex: 1 }} />
+      )}
+      <SidebarSwitch show={open} />
       {environment.isDesktop && (
         <>
+          {!environment.isMacOs && <div style={{ flex: 1 }} />}
           <IconButton
             data-testid="app-sidebar-arrow-button-back"
             disabled={props.router?.history.current === 0}
@@ -47,8 +50,6 @@ export const SidebarHeader = (props: SidebarHeaderProps) => {
           >
             <ArrowRightSmallIcon />
           </IconButton>
-
-          {!environment.isMacOs && <div style={{ flex: 1 }} />}
         </>
       )}
     </div>

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

@@ -0,0 +1,16 @@
+import { style } from '@vanilla-extract/css';
+
+export const sidebarSwitch = style({
+  opacity: 0,
+  width: 0,
+  overflow: 'hidden',
+  pointerEvents: 'none',
+  transition: 'opacity .3s ease-in-out',
+  selectors: {
+    '&[data-show=true]': {
+      opacity: 1,
+      width: '32px',
+      pointerEvents: 'auto',
+    },
+  },
+});

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

@@ -6,8 +6,9 @@ import { useAtom } from 'jotai';
 import { useRef } from 'react';
 
 import { appSidebarOpenAtom } from '../index.jotai';
+import * as styles from './sidebar-switch.css';
 
-export const SidebarSwitch = () => {
+export const SidebarSwitch = ({ show }: { show: boolean }) => {
   const [open, setOpen] = useAtom(appSidebarOpenAtom);
   const t = useAFFiNEI18N();
   const ref = useRef(null);
@@ -18,12 +19,14 @@ export const SidebarSwitch = () => {
   return (
     <Tooltip
       content={tooltipContent + ' ' + collapseKeyboardShortcuts}
-      side="right"
+      side={open ? 'bottom' : 'right'}
       portalOptions={{
         container: ref.current,
       }}
     >
       <IconButton
+        className={styles.sidebarSwitch}
+        data-show={show}
         size="large"
         data-testid={`app-sidebar-arrow-button-${open ? 'collapse' : 'expand'}`}
         style={{

packages/component/src/components/workspace/index.css.ts

@@ -11,12 +11,13 @@ export const appStyle = style({
   display: 'flex',
   flexGrow: '1',
   flexDirection: 'row',
+  backgroundColor: 'var(--affine-background-primary-color)',
   selectors: {
     '&[data-is-resizing="true"]': {
       cursor: 'col-resize',
     },
     '&.blur-background': {
-      backgroundColor: 'var(--affine-background-primary-color)',
+      backgroundColor: 'transparent',
     },
     '&.noisy-background::before': {
       content: '""',
@@ -70,7 +71,7 @@ export const mainContainerStyle = style({
   backgroundColor: 'var(--affine-background-primary-color)',
   selectors: {
     '&[data-show-padding="true"]': {
-      margin: '8px 8px 8px 0',
+      margin: '8px',
       borderRadius: '5px',
       overflow: 'hidden',
       boxShadow: 'var(--affine-shadow-1)',
@@ -119,6 +120,17 @@ globalStyle(`${mainContainerStyle} > div[data-panel-group] > div[data-panel]`, {
   },
 });
 
+// Hack margin so that it works normally when sidebar is closed
+globalStyle(
+  `[data-testid=app-sidebar-wrapper][data-open=true][data-is-floating=false][data-has-background=false]
+ ~ ${mainContainerStyle}[data-show-padding="true"]`,
+  {
+    // transition added here to prevent the transition from being applied on page load
+    transition: 'margin-left .3s ease-in-out',
+    marginLeft: '0',
+  }
+);
+
 export const toolStyle = style({
   position: 'fixed',
   right: '30px',