diff --git a/src/renderer/components/dropdown-menu/index.tsx b/src/renderer/components/dropdown-menu/index.tsx index 5e6bfe4f..b9cbd913 100644 --- a/src/renderer/components/dropdown-menu/index.tsx +++ b/src/renderer/components/dropdown-menu/index.tsx @@ -6,6 +6,7 @@ import type { MenuDropdownProps as MantineMenuDropdownProps, } from '@mantine/core'; import { Menu as MantineMenu, createPolymorphicComponent } from '@mantine/core'; +import { RiArrowLeftSFill } from 'react-icons/ri'; import styled from 'styled-components'; type MenuProps = MantineMenuProps; @@ -31,23 +32,6 @@ const StyledMenuItem = styled(MantineMenu.Item)` font-size: var(--dropdown-menu-item-font-size); font-family: var(--content-font-family); - ${(props) => - props.$isActive && - ` - &::before { - content: ''; // ::before and ::after both require content - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--dropdown-menu-bg-hover); - opacity: 0.5; - z-index: -1; - } - - `} - &:disabled { opacity: 0.6; } @@ -62,6 +46,10 @@ const StyledMenuItem = styled(MantineMenu.Item)` color: ${(props) => (props.$danger ? 'var(--danger-color)' : 'var(--dropdown-menu-fg)')}; } + & .mantine-Menu-itemRightSection { + display: flex; + } + cursor: default; `; @@ -114,7 +102,7 @@ const pMenuItem = ({ $isActive, $danger, children, ...props }: MenuItemProps) => } + rightSection={$isActive && } {...props} > {children}