added settings and profile to user menu

src/components/main/Header/index.tsx

@@ -36,7 +36,7 @@ const HeaderUnconnected: FC<IProps> = memo(
     const [is_scrolled, setIsScrolled] = useState(false);
 
     const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]);
-    const onProfileClick = useCallback(() => authOpenProfile(username), [authOpenProfile, user]);
+    // const onProfileClick = useCallback(() => authOpenProfile(username), [authOpenProfile, user]);
 
     const onScroll = useCallback(() => {
       const active = window.scrollY > 32;
@@ -77,7 +77,7 @@ const HeaderUnconnected: FC<IProps> = memo(
           )}
 
           {is_user && (
-            <UserButton user={user} onLogout={authLogout} onProfileClick={onProfileClick} />
+            <UserButton user={user} onLogout={authLogout} authOpenProfile={authOpenProfile} />
           )}
 
           {!is_user && (

src/components/main/UserButton/index.tsx

@@ -1,37 +1,51 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 import { Group } from '~/components/containers/Group';
 import styles from './styles.scss';
 import { getURL } from '~/utils/dom';
 import { Icon } from '~/components/input/Icon';
 import { IUser } from '~/redux/auth/types';
 import { PRESETS } from '~/constants/urls';
-import { Link } from 'react-router-dom';
+import { authOpenProfile } from '~/redux/auth/actions';
 
 interface IProps {
   user: Partial<IUser>;
   onLogout: () => void;
-  onProfileClick: () => void;
+  authOpenProfile: typeof authOpenProfile;
 }
 
-const UserButton: FC<IProps> = ({ user: { username, photo }, onProfileClick, onLogout }) => (
+const UserButton: FC<IProps> = ({ user: { username, photo }, authOpenProfile, onLogout }) => {
-  <div className={styles.wrap}>
+  const onProfileOpen = useCallback(() => {
-    <Group horizontal className={styles.user_button}>
+    authOpenProfile(username, 'profile');
-      <div className={styles.username} onClick={onProfileClick}>
+  }, [authOpenProfile, username]);
-        {username}
-      </div>
 
-      <div
+  const onSettingsOpen = useCallback(() => {
-        className={styles.user_avatar}
+    authOpenProfile(username, 'settings');
-        style={{ backgroundImage: `url('${getURL(photo, PRESETS.avatar)}')` }}
+  }, [authOpenProfile, username]);
-      >
-        {(!photo || !photo.id) && <Icon icon="profile" />}
-      </div>
-    </Group>
 
-    <div className={styles.menu}>
+  // const onMessagesOpen = useCallback(() => {
-      <div onClick={onLogout}>Выдох</div>
+  //   authOpenProfile(username, 'messages');
+  // }, [authOpenProfile, username]);
+
+  return (
+    <div className={styles.wrap}>
+      <Group horizontal className={styles.user_button}>
+        <div className={styles.username}>{username}</div>
+
+        <div
+          className={styles.user_avatar}
+          style={{ backgroundImage: `url('${getURL(photo, PRESETS.avatar)}')` }}
+        >
+          {(!photo || !photo.id) && <Icon icon="profile" />}
+        </div>
+      </Group>
+
+      <div className={styles.menu}>
+        <div onClick={onProfileOpen}>Профиль</div>
+        <div onClick={onSettingsOpen}>Настройки</div>
+        <div onClick={onLogout}>Выдох</div>
+      </div>
     </div>
-  </div>
+  );
-);
+};
 
 export { UserButton };

src/components/main/UserButton/styles.scss

@@ -17,6 +17,8 @@
   z-index: 1;
   box-sizing: border-box;
   padding: $gap;
+  display: none;
+  flex-direction: column;
 
   &::after {
     content: ' ';
@@ -29,6 +31,7 @@
     right: 0;
     top: -4px;
     transform: translate(-20px, 0);
+    z-index: -1;
   }
 
   & > div {
@@ -38,6 +41,8 @@
     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;
@@ -48,6 +53,10 @@
       border-bottom-left-radius: $radius;
       border-bottom-right-radius: $radius;
     }
+
+    &:hover {
+      background-color: $secondary;
+    }
   }
 
   &:hover > div {