made better profile menu

src/components/main/UserButton/index.tsx

@@ -2,6 +2,7 @@ import React, { FC, useCallback } from 'react';
 
 import { Group } from '~/components/containers/Group';
 import { Icon } from '~/components/input/Icon';
+import { MenuButton, MenuItemWithIcon } from '~/components/menu';
 import { ImagePresets } from '~/constants/urls';
 import { IUser } from '~/types/auth';
 import { getURL } from '~/utils/dom';
@@ -28,19 +29,23 @@ const UserButton: FC<IProps> = ({ user: { username, photo }, authOpenProfile, on
       <Group horizontal className={styles.user_button}>
         <div className={styles.username}>{username}</div>
 
-        <div
-          className={styles.user_avatar}
-          style={{ backgroundImage: `url('${getURL(photo, ImagePresets.avatar)}')` }}
+        <MenuButton
+          position="bottom"
+          translucent={false}
+          icon={
+            <div
+              className={styles.user_avatar}
+              style={{ backgroundImage: `url('${getURL(photo, ImagePresets.avatar)}')` }}
+            >
+              {(!photo || !photo.id) && <Icon icon="profile" />}
+            </div>
+          }
         >
-          {(!photo || !photo.id) && <Icon icon="profile" />}
-        </div>
+          <MenuItemWithIcon onClick={onProfileOpen}>Профиль</MenuItemWithIcon>
+          <MenuItemWithIcon onClick={onSettingsOpen}>Настройки</MenuItemWithIcon>
+          <MenuItemWithIcon onClick={onLogout}>Выдох</MenuItemWithIcon>
+        </MenuButton>
       </Group>
-
-      <div className={styles.menu}>
-        <div onClick={onProfileOpen}>Профиль</div>
-        <div onClick={onSettingsOpen}>Настройки</div>
-        <div onClick={onLogout}>Выдох</div>
-      </div>
     </div>
   );
 };

src/components/main/UserButton/styles.module.scss

@@ -9,63 +9,6 @@
   }
 }
 
-.menu {
-  position: absolute;
-  right: -$gap;
-  top: 100%;
-  padding: $gap;
-  border-radius: $radius;
-  display: none;
-  z-index: 1;
-  box-sizing: border-box;
-  padding: $gap;
-  display: none;
-  flex-direction: column;
-
-  &::after {
-    content: ' ';
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 0 0 16px 16px;
-    border-color: transparent transparent $content_bg transparent;
-    position: absolute;
-    right: 0;
-    top: -4px;
-    transform: translate(-20px, 0);
-    z-index: -1;
-  }
-
-  & > div {
-    background: $content_bg;
-    padding: $gap $gap * 2;
-    cursor: pointer;
-    box-sizing: border-box;
-    transition: opacity 0.25s;
-    width: 100%;
-    padding-right: 40px;
-    transition: background-color 0.25s;
-
-    &:first-child {
-      border-top-left-radius: $radius;
-      border-top-right-radius: $radius;
-    }
-
-    &:last-child {
-      border-bottom-left-radius: $radius;
-      border-bottom-right-radius: $radius;
-    }
-
-    &:hover {
-      background-color: $secondary;
-    }
-  }
-
-  &:hover > div {
-    opacity: 1;
-  }
-}
-
 .user_button {
   align-items: center;
   border-radius: $radius;