From b3d8090320c8565dc05f871c39ee2254c7f09c1d Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 12 Aug 2022 13:32:38 +0700 Subject: [PATCH] user button opens sidebar now --- src/components/main/UserButton/index.tsx | 47 +++------ src/containers/main/Header/index.tsx | 35 +++++-- src/styles/_reset.scss | 120 +++++++++++++++++++---- 3 files changed, 142 insertions(+), 60 deletions(-) diff --git a/src/components/main/UserButton/index.tsx b/src/components/main/UserButton/index.tsx index 0dc131b4..21b26353 100644 --- a/src/components/main/UserButton/index.tsx +++ b/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; - onLogout: () => void; - authOpenProfile: () => void; + username: string; + photo?: IFile; + onClick?: () => void; } -const UserButton: FC = ({ user: { username, photo }, authOpenProfile, onLogout }) => { - const onProfileOpen = useCallback(() => { - authOpenProfile(); - }, [authOpenProfile]); - - const onSettingsOpen = useCallback(() => { - authOpenProfile(); - }, [authOpenProfile]); - +const UserButton: FC = ({ username, photo, onClick }) => { return ( -
+
- } +
- Профиль - Настройки - Выдох - + {(!photo || !photo.id) && } +
- + ); }; diff --git a/src/containers/main/Header/index.tsx b/src/containers/main/Header/index.tsx index 2fbd8af2..8271100d 100644 --- a/src/containers/main/Header/index.tsx +++ b/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 = 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(() => { - showModal(Dialog.Profile, { username: user.username }); - }, [user.username, showModal]); + const openProfileSidebar = useCallback(() => { + open(SidebarName.Settings, {}); + }, [open]); const onLogin = useCallback(() => showModal(Dialog.Login, {}), [showModal]); @@ -47,10 +49,12 @@ const Header: FC = 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 = observer(() => { }, [top]); return ( -
+
@@ -98,10 +104,21 @@ const Header: FC = observer(() => { - {isUser && } + {isUser && ( + + )} {!isUser && ( - )} diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index d980597c..bfe72861 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -3,19 +3,87 @@ License: none (public domain) */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, 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 { +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +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, -footer, header, hgroup, menu, nav, section { +article, +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, -q:before, q:after { +blockquote:before, +blockquote:after, +q:before, +q:after { content: ''; content: none; } @@ -48,4 +129,5 @@ table { } button { padding: 0; + color: inherit; }