fix: some style updates (#2348)

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

@@ -13,19 +13,17 @@ export const navWrapperStyle = style({
   width: navWidthVar,
   minWidth: navWidthVar,
   height: '100%',
-  backgroundColor: 'var(--affine-background-secondary-color)',
+  zIndex: 2,
+  backgroundColor: 'transparent',
   '@media': {
     [`(max-width: ${floatingMaxWidth}px)`]: {
       position: 'absolute',
       width: `calc(${navWidthVar})`,
-      zIndex: 2,
+      backgroundColor: 'var(--affine-background-primary-color)',
       selectors: {
         '&[data-open="false"]': {
           marginLeft: `calc((10vw + ${navWidthVar}) * -1)`,
         },
-        '&[data-is-macos-electron="true"]': {
-          backgroundColor: 'var(--affine-background-primary-color)',
-        },
       },
     },
   },
@@ -33,9 +31,6 @@ export const navWrapperStyle = style({
     '&[data-open="false"]': {
       marginLeft: `calc(${navWidthVar} * -1)`,
     },
-    '&[data-is-macos-electron="true"]': {
-      backgroundColor: 'transparent',
-    },
     '&[data-enable-animation="true"]': {
       transition: 'margin-left .3s, width .3s',
     },
@@ -60,18 +55,9 @@ export const navHeaderStyle = style({
   justifyContent: 'space-between',
   alignItems: 'center',
   gap: '32px',
-  '@media': {
-    [`(max-width: ${floatingMaxWidth}px)`]: {
-      selectors: {
-        '&[data-open="true"]': {
-          WebkitAppRegion: 'no-drag',
-        },
-      },
-    } as ComplexStyleRule,
-  },
+  WebkitAppRegion: 'drag',
   selectors: {
     '&[data-is-macos-electron="true"]': {
-      WebkitAppRegion: 'drag',
       justifyContent: 'flex-end',
     },
   },

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

@@ -8,6 +8,8 @@ export const appSidebarOpenAtom = atomWithStorage(
   APP_SIDEBAR_OPEN,
   undefined as boolean | undefined
 );
+export const appSidebarFloatingAtom = atom(false);
+
 export const appSidebarResizingAtom = atom(false);
 export const appSidebarWidthAtom = atomWithStorage(
   'app-sidebar-width',

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

@@ -14,6 +14,7 @@ import {
 } from './index.css';
 import {
   APP_SIDEBAR_OPEN,
+  appSidebarFloatingAtom,
   appSidebarOpenAtom,
   appSidebarResizingAtom,
   appSidebarWidthAtom,
@@ -37,21 +38,36 @@ function useEnableAnimation() {
 export function AppSidebar(props: AppSidebarProps): ReactElement {
   const [open, setOpen] = useAtom(appSidebarOpenAtom);
   const appSidebarWidth = useAtomValue(appSidebarWidthAtom);
+  const [appSidebarFloating, setAppSidebarFloating] = useAtom(
+    appSidebarFloatingAtom
+  );
   const initialRender = open === undefined;
 
   const isResizing = useAtomValue(appSidebarResizingAtom);
   const navRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (open === undefined && localStorage.getItem(APP_SIDEBAR_OPEN) === null) {
-      // give the initial value,
-      // so that the sidebar can be closed on mobile by default
+    function onResize() {
       const { matches } = window.matchMedia(
-        `(min-width: ${floatingMaxWidth}px)`
+        `(max-width: ${floatingMaxWidth}px)`
       );
-      setOpen(matches);
+      if (
+        open === undefined &&
+        localStorage.getItem(APP_SIDEBAR_OPEN) === null
+      ) {
+        // give the initial value,
+        // so that the sidebar can be closed on mobile by default
+        setOpen(!matches);
+      }
+      setAppSidebarFloating(matches && !!open);
     }
-  }, [open, setOpen]);
+
+    onResize();
+    window.addEventListener('resize', onResize);
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, [open, setAppSidebarFloating, setOpen]);
 
   // disable animation to avoid UI flash
   const enableAnimation = useEnableAnimation();
@@ -85,6 +101,7 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
       <div
         data-testid="app-sidebar-float-mask"
         data-open={open}
+        data-is-floating={appSidebarFloating}
         className={sidebarFloatMaskStyle}
         onClick={() => setOpen(false)}
       />
@@ -99,4 +116,9 @@ export { AppSidebarFallback } from './fallback';
 export * from './menu-item';
 export * from './quick-search-input';
 export * from './sidebar-containers';
-export { appSidebarOpenAtom, appSidebarResizingAtom, updateAvailableAtom };
+export {
+  appSidebarFloatingAtom,
+  appSidebarOpenAtom,
+  appSidebarResizingAtom,
+  updateAvailableAtom,
+};

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

@@ -15,7 +15,6 @@ export const root = style({
       background: 'var(--affine-hover-color)',
     },
     '&[data-active="true"]': {
-      color: 'var(--affine-primary-color)',
       background: 'var(--affine-hover-color)',
     },
     '&[data-disabled="true"]': {

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

@@ -3,10 +3,9 @@ import { style } from '@vanilla-extract/css';
 export const resizerContainer = style({
   position: 'absolute',
   right: 0,
-  top: 0,
-  bottom: 0,
-  width: '10px',
-  height: '100%',
+  top: '16px',
+  bottom: '16px',
+  width: '16px',
   zIndex: 'calc(var(--affine-z-index-modal) + 1)',
   transform: 'translateX(50%)',
   backgroundColor: 'transparent',
@@ -24,6 +23,7 @@ export const resizerContainer = style({
       opacity: 1,
     },
     '&[data-resizing="true"]': {
+      opacity: 1,
       transition: 'width .3s, min-width .3s, max-width .3s',
     },
     '&[data-open="false"]': {
@@ -38,10 +38,8 @@ export const resizerContainer = style({
 export const resizerInner = style({
   position: 'absolute',
   height: '100%',
-  width: '2px',
-  left: '3px',
-  backgroundColor: 'var(--affine-border-color)',
-  selectors: {
-    [`${resizerContainer}:hover &`]: {},
-  },
+  width: '4px',
+  left: '6px',
+  borderRadius: '4px',
+  backgroundColor: 'var(--affine-primary-color)',
 });

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

@@ -4,7 +4,7 @@ export const baseContainer = style({
   padding: '12px 16px',
   display: 'flex',
   flexFlow: 'column nowrap',
-  rowGap: '8px',
+  rowGap: '4px',
 });
 
 export const scrollableContainerRoot = style({