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

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

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

@@ -1,4 +1,3 @@
-import { Wrapper } from '@affine/component';
 import {
   appSidebarFloatingAtom,
   appSidebarOpenAtom,
@@ -66,12 +65,8 @@ export const Header = forwardRef<HTMLDivElement, HeaderPros>(function Header(
           })}
         >
           <div className={clsx(style.headerItem, 'top-item')}>
-            <div ref={sidebarSwitchRef}>
-              {!open && (
-                <Wrapper marginRight={20}>
-                  <SidebarSwitch />
-                </Wrapper>
-              )}
+            <div ref={sidebarSwitchRef} style={{ marginRight: open ? 0 : 20 }}>
+              <SidebarSwitch show={!open} />
             </div>
           </div>
           <div className={clsx(style.headerItem, 'left')}>

apps/core/src/components/pure/workspace-slider-bar/collections/styles.css.ts

@@ -77,10 +77,10 @@ export const collapsibleContent = style({
   marginTop: '4px',
   selectors: {
     '&[data-state="open"]': {
-      animation: `${slideDown} 0.2s ease-out`,
+      animation: `${slideDown} 0.2s ease-in-out`,
     },
     '&[data-state="closed"]': {
-      animation: `${slideUp} 0.2s ease-out`,
+      animation: `${slideUp} 0.2s ease-in-out`,
     },
   },
 });