From c7f14cd48a59c0bd58c1bae3601bf7ece1e145e9 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Tue, 5 Sep 2023 17:48:48 +0800
Subject: [PATCH] fix: sidebar ui fix (#4187)

---
 packages/component/src/components/app-sidebar/index.css.ts | 2 +-
 packages/component/src/components/app-sidebar/index.tsx    | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/component/src/components/app-sidebar/index.css.ts b/packages/component/src/components/app-sidebar/index.css.ts
index 2443f1a599..5d7c512bcf 100644
--- a/packages/component/src/components/app-sidebar/index.css.ts
+++ b/packages/component/src/components/app-sidebar/index.css.ts
@@ -35,7 +35,7 @@ export const navWrapperStyle = style({
     '&[data-enable-animation="true"]': {
       transition: 'margin-left .3s, width .3s',
     },
-    '&.has-background': {
+    '&[data-is-floating="false"].has-background': {
       backgroundColor: 'var(--affine-white-60)',
       borderRight: '1px solid var(--affine-border-color)',
     },
diff --git a/packages/component/src/components/app-sidebar/index.tsx b/packages/component/src/components/app-sidebar/index.tsx
index aab102c6f5..09630ec9d0 100644
--- a/packages/component/src/components/app-sidebar/index.tsx
+++ b/packages/component/src/components/app-sidebar/index.tsx
@@ -2,6 +2,7 @@ import { Skeleton } from '@mui/material';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import { useAtom, useAtomValue } from 'jotai';
+import debounce from 'lodash/debounce';
 import type { PropsWithChildren, ReactElement } from 'react';
 import { useEffect, useRef, useState } from 'react';
 
@@ -77,10 +78,10 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
       setAppSidebarFloating(isFloating && !!open);
     }
 
-    onResize();
-    window.addEventListener('resize', onResize);
+    const dOnResize = debounce(onResize, 50);
+    window.addEventListener('resize', dOnResize);
     return () => {
-      window.removeEventListener('resize', onResize);
+      window.removeEventListener('resize', dOnResize);
     };
   }, [appSidebarWidth, open, setAppSidebarFloating, setOpen]);