muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

made better sidebar logout button

Browse source
This commit is contained in:
Fedor Katurov 2022-07-28 14:12:18 +07:00
parent be061c966f
commit 27c87bea0a
8 changed files with 58 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/containers/profile/ProfileSidebarLogoutButton/index.tsx Normal file
View file

@ -0,0 +1,28 @@
import React, { FC } from 'react';
import { Group } from '~/components/containers/Group';
import { Padder } from '~/components/containers/Padder';
import { Button } from '~/components/input/Button';
import { Icon } from '~/components/input/Icon';
import { MenuButton } from '~/components/menu';
import styles from './styles.module.scss';
interface ProfileSidebarLogoutButtonProps {
onLogout?: () => void;
}
const ProfileSidebarLogoutButton: FC<ProfileSidebarLogoutButtonProps> = ({ onLogout }) => (
<MenuButton icon={<Button color="link" iconRight="logout">Выйти</Button>} position="top-end">
<Padder className={styles.wrapper}>
<Group>
<h5>Захотелось наружу?</h5>
<div>Там холодно, страшно и больше не раздают пончики!</div>
<div />
<div><Button onClick={onLogout} color="primary" stretchy>Выпустите меня!</Button></div>
</Group>
</Padder>
</MenuButton>
);
export { ProfileSidebarLogoutButton }

6
src/containers/profile/ProfileSidebarLogoutButton/styles.module.scss Normal file
View file

@ -0,0 +1,6 @@
@import "src/styles/variables";
.wrapper {
max-width: 300px;
font: $font_14_regular;
}

6
src/containers/profile/ProfileSidebarMenu/index.tsx
View file

@ -14,6 +14,8 @@ import { ProfileStats } from '~/containers/profile/ProfileStats';
import { useAuth } from '~/hooks/auth/useAuth';
import markdown from '~/styles/common/markdown.module.scss';
import { ProfileSidebarLogoutButton } from '../ProfileSidebarLogoutButton';
import styles from './styles.module.scss';
interface ProfileSidebarMenuProps {
@ -49,9 +51,7 @@ const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => {
<Group className={styles.buttons} horizontal>
<Filler />
<MenuButton icon={<Button color="link"><Icon icon="dots-vertical" size={24} /></Button>} position="top-end">
<MenuItemWithIcon onClick={onLogout}>Выйти</MenuItemWithIcon>
</MenuButton>
<ProfileSidebarLogoutButton onLogout={onLogout}/>
</Group>
</div>
);