user menu

src/components/main/UserButton/index.tsx

@@ -0,0 +1,28 @@
+import React, { FC } 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';
+
+interface IProps {
+  user: Partial<IUser>;
+  onLogout: () => void;
+}
+
+const UserButton: FC<IProps> = ({ user: { username, photo }, onLogout }) => (
+  <div className={styles.wrap}>
+    <Group horizontal className={styles.user_button}>
+      <div>{username}</div>
+      <div className={styles.user_avatar} style={{ backgroundImage: `url('${getURL(photo)}')` }}>
+        {(!photo || !photo.id) && <Icon icon="profile" />}
+      </div>
+    </Group>
+
+    <div className={styles.menu}>
+      <div onClick={onLogout}>Выдох</div>
+    </div>
+  </div>
+);
+
+export { UserButton };

src/components/main/UserButton/styles.scss

@@ -0,0 +1,68 @@
+.wrap {
+  position: relative;
+  z-index: 2;
+
+  &:hover .menu {
+    display: flex;
+  }
+}
+
+.menu {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  padding: $gap;
+  background: $content_bg;
+  border-radius: 0 0 $radius $radius;
+  display: none;
+  z-index: 1;
+  background: $content_bg;
+  min-width: 100%;
+
+  & > div {
+    padding: $gap $gap * 2;
+    cursor: pointer;
+    opacity: 0.5;
+  }
+
+  &:hover > div {
+    opacity: 1;
+  }
+}
+
+.user_button {
+  align-items: center;
+  border-radius: $input_radius;
+  font: $font_16_semibold;
+  text-transform: uppercase;
+  flex: 0 !important;
+  cursor: pointer;
+  margin-left: $gap;
+  white-space: nowrap;
+  box-shadow: inset transparentize($content_bg, 0.8) 0 0 0 1px;
+  background: transparentize($content_bg, 0.1);
+  padding: 0 0 0 $gap;
+}
+
+.user_avatar {
+  @include outer_shadow();
+
+  flex: 0 0 32px;
+  width: 32px;
+  height: 32px;
+  background: white;
+  border-radius: $radius;
+  margin-left: ($gap + 2px) !important;
+  background: 50% 50% no-repeat $wisegreen;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+
+  svg {
+    fill: #222222;
+    stroke: #222222;
+    width: 24px;
+    height: 24px;
+  }
+}