fix: a serise of ui issues of new setting (#2920)

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

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

@@ -16,7 +16,6 @@ export const navWrapperStyle = style({
   zIndex: 2,
   paddingBottom: '8px',
   backgroundColor: 'transparent',
-  borderRight: '1px solid var(--affine-border-color)',
   '@media': {
     [`(max-width: ${floatingMaxWidth}px)`]: {
       position: 'absolute',
@@ -42,6 +41,10 @@ export const navWrapperStyle = style({
     },
     '&.has-background': {
       backgroundColor: 'var(--affine-white-60)',
+      borderRight: '1px solid var(--affine-border-color)',
+    },
+    '&.has-border': {
+      borderRight: '1px solid var(--affine-border-color)',
     },
   },
 });

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

@@ -97,6 +97,9 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
         })}
         className={clsx(navWrapperStyle, {
           'has-background': environment.isDesktop && props.hasBackground,
+          'has-border':
+            !environment.isDesktop ||
+            (environment.isDesktop && props.hasBackground),
         })}
         data-open={open}
         data-is-macos-electron={isMacosDesktop}