fix: context menu sub menu

Signed-off-by: Innei <i@innei.in>
RSSNext · Aug 21, 2024 · 9352dd1 · 9352dd1
1 parent 5f30bfa
commit 9352dd1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/src/renderer/src/components/ui/context-menu/context-menu.tsx b/src/renderer/src/components/ui/context-menu/context-menu.tsx
@@ -31,7 +31,7 @@ const ContextMenuSubTrigger = React.forwardRef<
  {...props}
  >
  {children}
- <i className="i-mingcute-right-fill ml-auto size-3.5" />
+ <i className="i-mingcute-right-line -mr-1 ml-auto size-3.5" />
  </ContextMenuPrimitive.SubTrigger>
 ))
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName

diff --git a/src/renderer/src/providers/context-menu-provider.tsx b/src/renderer/src/providers/context-menu-provider.tsx
@@ -2,6 +2,7 @@ import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
+ ContextMenuPortal,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubContent,
@@ -16,6 +17,7 @@ import type { NativeMenuItem } from "@renderer/lib/native-menu"
 import { CONTEXT_MENU_SHOW_EVENT_KEY } from "@renderer/lib/native-menu"
 import type { ReactNode } from "react"
 import {
+ Fragment,
  memo,
  useCallback,
  useEffect,
@@ -126,15 +128,17 @@ const Item = memo(({ item }: { item: NativeMenuItem }) => {
  }
  case "text": {
  const Wrapper = item.submenu ? ContextMenuSubTrigger : ContextMenuItem
+
+ const Sub = item.submenu ? ContextMenuSub : Fragment
  return (
- <ContextMenuSub>
+ <Sub>
  <Wrapper
  ref={itemRef}
- disabled={item.enabled === false || (item.click === undefined && !item.submenu)}
+ disabled={item.enabled === false ||
+ (item.click === undefined && !item.submenu)}
  onClick={onClick}
- className="flex items-center gap-1"
+ className="flex items-center gap-2"
  >
- {/* {!!item.icon && <span className="mr-1">{item.icon}</span>} */}
  {item.icon}
  {item.label}
 
@@ -143,16 +147,17 @@ const Item = memo(({ item }: { item: NativeMenuItem }) => {
  <KbdCombined joint>{item.shortcut}</KbdCombined>
  </div>
  )}
-
- {item.submenu && (
+ </Wrapper>
+ {item.submenu && (
+ <ContextMenuPortal>
  <ContextMenuSubContent>
  {item.submenu.map((subItem, index) => (
  <Item key={index} item={subItem} />
  ))}
  </ContextMenuSubContent>
- )}
- </Wrapper>
- </ContextMenuSub>
+ </ContextMenuPortal>
+ )}
+ </Sub>
  )
  }
  default: {