fix: menu item click area (#3051)

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

@@ -44,6 +44,10 @@ export const content = style({
   flex: 1,
 });
 
+export const postfix = style({
+  justifySelf: 'flex-end',
+});
+
 export const icon = style({
   color: 'var(--affine-icon-color)',
   fontSize: '20px',

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

@@ -19,6 +19,10 @@ export interface MenuLinkItemProps
   extends MenuItemProps,
     Pick<LinkProps, 'href'> {}
 
+const stopPropagation: React.MouseEventHandler = e => {
+  e.stopPropagation();
+};
+
 export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
   (
     {
@@ -44,6 +48,7 @@ export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
       <div
         ref={ref}
         {...props}
+        onClick={onClick}
         className={clsx([styles.root, props.className])}
         data-active={active}
         data-disabled={disabled}
@@ -69,15 +74,16 @@ export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
             )}
             {React.cloneElement(icon, {
               className: clsx([styles.icon, icon.props.className]),
-              onClick: onClick,
             })}
           </div>
         )}
 
-        <div onClick={onClick} className={styles.content}>
+        <div className={styles.content}>{children}</div>
-          {children}
+        {postfix ? (
-        </div>
+          <div className={styles.postfix} onClick={stopPropagation}>
-        {postfix}
+            {postfix}
+          </div>
+        ) : null}
       </div>
     );
   }