feat: modify sidebar floating logic and header responsive style (#3550)

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

@@ -17,23 +17,18 @@ export const navWrapperStyle = style({
   paddingBottom: '8px',
   backgroundColor: 'transparent',
   '@media': {
-    [`(max-width: ${floatingMaxWidth}px)`]: {
-      position: 'absolute',
-      width: `calc(${navWidthVar})`,
-      zIndex: 4,
-      backgroundColor: 'var(--affine-background-primary-color)',
-      selectors: {
-        '&[data-open="false"]': {
-          marginLeft: `calc((10vw + ${navWidthVar}) * -1)`,
-        },
-      },
-    },
     print: {
       display: 'none',
       zIndex: -1,
     },
   },
   selectors: {
+    '&[data-is-floating="true"]': {
+      position: 'absolute',
+      width: `calc(${navWidthVar})`,
+      zIndex: 4,
+      backgroundColor: 'var(--affine-background-primary-color)',
+    },
     '&[data-open="false"]': {
       marginLeft: `calc(${navWidthVar} * -1)`,
     },
@@ -93,17 +88,15 @@ export const sidebarFloatMaskStyle = style({
   right: '100%',
   bottom: 0,
   background: 'var(--affine-background-modal-color)',
-  '@media': {
-    [`(max-width: ${floatingMaxWidth}px)`]: {
-      selectors: {
-        '&[data-open="true"]': {
-          opacity: 1,
-          pointerEvents: 'auto',
-          right: '0',
-          zIndex: 3,
-        },
-      },
+  selectors: {
+    '&[data-open="true"][data-is-floating="true"]': {
+      opacity: 1,
+      pointerEvents: 'auto',
+      right: '0',
+      zIndex: 3,
     },
+  },
+  '@media': {
     print: {
       display: 'none',
     },

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

@@ -59,18 +59,22 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
 
   useEffect(() => {
     function onResize() {
-      const { matches } = window.matchMedia(
+      const isFloatingMaxWidth = window.matchMedia(
         `(max-width: ${floatingMaxWidth}px)`
-      );
+      ).matches;
+      const isOverflowWidth = window.matchMedia(
+        `(max-width: ${appSidebarWidth / 0.4}px)`
+      ).matches;
+      const isFloating = isFloatingMaxWidth || isOverflowWidth;
       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);
+        setOpen(!isFloating);
       }
-      setAppSidebarFloating(matches && !!open);
+      setAppSidebarFloating(isFloating && !!open);
     }
 
     onResize();
@@ -78,7 +82,7 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
     return () => {
       window.removeEventListener('resize', onResize);
     };
-  }, [open, setAppSidebarFloating, setOpen]);
+  }, [appSidebarWidth, open, setAppSidebarFloating, setOpen]);
 
   // disable animation to avoid UI flash
   const enableAnimation = useEnableAnimation();
@@ -99,6 +103,7 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
         })}
         data-open={open}
         data-is-macos-electron={isMacosDesktop}
+        data-is-floating={appSidebarFloating}
         data-enable-animation={enableAnimation && !isResizing}
       >
         <nav className={navStyle} ref={navRef} data-testid="app-sidebar">

packages/component/src/components/page-list/view/collection-list.css.ts

@@ -21,7 +21,7 @@ export const viewButton = style({
   fontSize: 'var(--affine-font-xs)',
   background: 'var(--affine-white)',
   ['WebkitAppRegion' as string]: 'no-drag',
-  maxWidth: '200px',
+  maxWidth: '150px',
   color: 'var(--affine-text-secondary-color)',
   border: '1px solid var(--affine-border-color)',
   transition: 'margin-left 0.2s ease-in-out',
@@ -30,15 +30,6 @@ export const viewButton = style({
     background: 'var(--affine-hover-color)',
   },
   marginRight: '20px',
-  '@media': {
-    '(max-width: 1200px)': {
-      maxWidth: '100px',
-    },
-    '(max-width: 900px)': {
-      maxWidth: '150px',
-      marginRight: '10px',
-    },
-  },
 });
 globalStyle(`${viewButton} > span`, {
   display: 'block',
@@ -74,6 +65,8 @@ export const deleteOption = style({
 export const filterButton = style({
   borderRadius: '8px',
   height: '100%',
+  width: '100%',
+  marginRight: '20px',
   padding: '4px 8px',
   fontSize: 'var(--affine-font-xs)',
   background: 'var(--affine-white)',