user button opens sidebar now

src/components/main/UserButton/index.tsx

@@ -1,52 +1,35 @@
-import React, { FC, useCallback } from 'react';
+import { FC } 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 { IFile } from '~/types';
 import { getURL } from '~/utils/dom';
 
 import styles from './styles.module.scss';
 
 interface IProps {
-  user: Partial<IUser>;
+  username: string;
-  onLogout: () => void;
+  photo?: IFile;
-  authOpenProfile: () => void;
+  onClick?: () => void;
 }
 
-const UserButton: FC<IProps> = ({ user: { username, photo }, authOpenProfile, onLogout }) => {
+const UserButton: FC<IProps> = ({ username, photo, onClick }) => {
-  const onProfileOpen = useCallback(() => {
-    authOpenProfile();
-  }, [authOpenProfile]);
-
-  const onSettingsOpen = useCallback(() => {
-    authOpenProfile();
-  }, [authOpenProfile]);
-
   return (
-    <div className={styles.wrap}>
+    <button className={styles.wrap} onClick={onClick}>
       <Group horizontal className={styles.user_button}>
         <div className={styles.username}>{username}</div>
 
-        <MenuButton
-          position="bottom"
-          translucent={false}
-          icon={
         <div
           className={styles.user_avatar}
-              style={{ backgroundImage: `url('${getURL(photo, ImagePresets.avatar)}')` }}
+          style={{
+            backgroundImage: `url('${getURL(photo, ImagePresets.avatar)}')`,
+          }}
         >
           {(!photo || !photo.id) && <Icon icon="profile" />}
         </div>
-          }
-        >
-          <MenuItemWithIcon onClick={onProfileOpen}>Профиль</MenuItemWithIcon>
-          <MenuItemWithIcon onClick={onSettingsOpen}>Настройки</MenuItemWithIcon>
-          <MenuItemWithIcon onClick={onLogout}>Выдох</MenuItemWithIcon>
-        </MenuButton>
       </Group>
-    </div>
+    </button>
   );
 };
 

src/containers/main/Header/index.tsx

@@ -11,6 +11,7 @@ import { Button } from '~/components/input/Button';
 import { Logo } from '~/components/main/Logo';
 import { UserButton } from '~/components/main/UserButton';
 import { Dialog } from '~/constants/modal';
+import { SidebarName } from '~/constants/sidebar';
 import { URLS } from '~/constants/urls';
 import { useAuth } from '~/hooks/auth/useAuth';
 import { useScrollTop } from '~/hooks/dom/useScrollTop';
@@ -18,6 +19,7 @@ import { useFlow } from '~/hooks/flow/useFlow';
 import { useGetLabStats } from '~/hooks/lab/useGetLabStats';
 import { useModal } from '~/hooks/modal/useModal';
 import { useUpdates } from '~/hooks/updates/useUpdates';
+import { useSidebar } from '~/utils/providers/SidebarProvider';
 
 import styles from './styles.module.scss';
 
@@ -27,15 +29,15 @@ const Header: FC<HeaderProps> = observer(() => {
   const labStats = useGetLabStats();
 
   const [isScrolled, setIsScrolled] = useState(false);
-  const { logout } = useAuth();
   const { showModal } = useModal();
   const { isUser, user } = useAuth();
   const { updates: flowUpdates } = useFlow();
   const { borisCommentedAt } = useUpdates();
+  const { open } = useSidebar();
 
-  const openProfile = useCallback(() => {
+  const openProfileSidebar = useCallback(() => {
-    showModal(Dialog.Profile, { username: user.username });
+    open(SidebarName.Settings, {});
-  }, [user.username, showModal]);
+  }, [open]);
 
   const onLogin = useCallback(() => showModal(Dialog.Login, {}), [showModal]);
 
@@ -47,10 +49,12 @@ const Header: FC<HeaderProps> = observer(() => {
       borisCommentedAt &&
       (!user.last_seen_boris ||
         isBefore(new Date(user.last_seen_boris), new Date(borisCommentedAt))),
-    [borisCommentedAt, isUser, user.last_seen_boris]
+    [borisCommentedAt, isUser, user.last_seen_boris],
   );
 
-  const hasLabUpdates = useMemo(() => labStats.updates.length > 0, [labStats.updates]);
+  const hasLabUpdates = useMemo(() => labStats.updates.length > 0, [
+    labStats.updates,
+  ]);
   const hasFlowUpdates = useMemo(() => flowUpdates.length > 0, [flowUpdates]);
 
   // Needed for SSR
@@ -59,7 +63,9 @@ const Header: FC<HeaderProps> = observer(() => {
   }, [top]);
 
   return (
-    <header className={classNames(styles.wrap, { [styles.is_scrolled]: isScrolled })}>
+    <header
+      className={classNames(styles.wrap, { [styles.is_scrolled]: isScrolled })}
+    >
       <div className={styles.container}>
         <div className={styles.logo_wrapper}>
           <Logo />
@@ -98,10 +104,21 @@ const Header: FC<HeaderProps> = observer(() => {
           </Authorized>
         </nav>
 
-        {isUser && <UserButton user={user} onLogout={logout} authOpenProfile={openProfile} />}
+        {isUser && (
+          <UserButton
+            username={user.username}
+            photo={user.photo}
+            onClick={openProfileSidebar}
+          />
+        )}
 
         {!isUser && (
-          <Button className={styles.user_button} onClick={onLogin} round color="secondary">
+          <Button
+            className={styles.user_button}
+            onClick={onLogin}
+            round
+            color="secondary"
+          >
             ВДОХ
           </Button>
         )}

src/styles/_reset.scss

@@ -3,19 +3,87 @@
    License: none (public domain)
 */
 
-html, body, div, span, applet, object, iframe,
+html,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+body,
-a, abbr, acronym, address, big, cite, code,
+div,
-del, dfn, em, img, ins, kbd, q, s, samp,
+span,
-small, strike, strong, sub, sup, tt, var,
+applet,
-b, u, i, center,
+object,
-dl, dt, dd, ol, ul, li,
+iframe,
-fieldset, form, label, legend,
+h1,
-table, caption, tbody, tfoot, thead, tr, th, td,
+h2,
-article, aside, canvas, details, embed,
+h3,
-figure, figcaption, footer, header, hgroup,
+h4,
-menu, nav, output, ruby, section, summary,
+h5,
-time, mark, audio, video {
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
   margin: 0;
   padding: 0;
   border: 0;
@@ -24,21 +92,34 @@ time, mark, audio, video {
   vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
+article,
-footer, header, hgroup, menu, nav, section {
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
   display: block;
 }
 body {
   line-height: 1;
 }
-ol, ul {
+ol,
+ul {
   list-style: none;
 }
-blockquote, q {
+blockquote,
+q {
   quotes: none;
 }
-blockquote:before, blockquote:after,
+blockquote:before,
-q:before, q:after {
+blockquote:after,
+q:before,
+q:after {
   content: '';
   content: none;
 }
@@ -48,4 +129,5 @@ table {
 }
 button {
   padding: 0;
+  color: inherit;
 }