made better profile menu

src/components/menu/MenuButton/index.tsx

@@ -13,17 +13,19 @@ interface MenuButtonProps {
   position?: Placement;
   icon?: ReactNode;
   className?: string;
-  translucentMenu?: boolean;
   activate?: 'hover' | 'focus';
+  fixed?: boolean;
+  translucent?: boolean;
 }
 
 const MenuButton: FC<MenuButtonProps> = ({
-  position = 'bottom-end',
+  position = 'auto',
   children,
   className,
   icon = <Icon icon="dots-vertical" size={24} />,
-  translucentMenu,
+  translucent = true,
   activate = 'focus',
+  fixed,
 }) => {
   const focus = useFocusEvent(false, 150);
   const hover = useFocusEvent(false, 150);
@@ -34,12 +36,13 @@ const MenuButton: FC<MenuButtonProps> = ({
 
   const popper = usePopper(referenceElement, popperElement, {
     placement: position,
+    strategy: fixed ? 'fixed' : 'absolute',
     modifiers: [
       { name: 'arrow', options: { element: arrowElement } },
       {
         name: 'offset',
         options: {
-          offset: [5, 10],
+          offset: [-10, 10],
         },
       },
     ],
@@ -65,7 +68,8 @@ const MenuButton: FC<MenuButtonProps> = ({
         ref={setPopperElement}
         {...popper.attributes.popper}
         className={classNames(styles.popper, {
-          [styles.translucent]: translucentMenu,
+          [styles.fixed]: fixed,
+          [styles.translucent]: translucent,
           [styles.visible]: visible,
         })}
       >

src/components/menu/MenuButton/styles.module.scss

@@ -7,7 +7,6 @@
 
 .popper {
   @include outer_shadow;
-  @include blur($content_bg, 15px, 0.5);
 
   box-sizing: border-box;
   z-index: 12;
@@ -15,12 +14,21 @@
   visibility: hidden;
   pointer-events: none;
   touch-action: none;
+  background-color: transparentize($content_bg, 0.05);
 
   &.visible {
     visibility: visible;
     pointer-events: all;
     touch-action: initial;
   }
+
+  &.fixed {
+    z-index: 100;
+  }
+
+  &.translucent {
+    @include blur($content_bg, 15px, 0.5);
+  }
 }
 
 .arrow {

src/components/menu/MenuItemWithIcon/index.tsx

@@ -6,15 +6,17 @@ import styles from './styles.module.scss';
 
 interface MenuItemWithIconProps {
   children: string;
-  icon: string;
+  icon?: string;
   onClick?: () => void;
 }
 
 const MenuItemWithIcon: FC<MenuItemWithIconProps> = ({ children, icon, onClick }) => (
   <button className={styles.item} onClick={onClick}>
-    <div className={styles.icon}>
-      <Icon icon={icon} size={20} />
-    </div>
+    {icon && (
+      <div className={styles.icon}>
+        <Icon icon={icon} size={20} />
+      </div>
+    )}
 
     <div className={styles.text}>{children}</div>
   </button>

src/components/menu/MenuItemWithIcon/styles.module.scss

@@ -18,12 +18,11 @@
 
 .icon {
   flex: 0 0 20px;
-  margin-right: $gap;
 }
 
 .text {
   flex: 1;
   text-align: left;
-  padding-right: $gap;
+  padding: 0 $gap;
   white-space: nowrap;
 }