cleared profile sidebar

src/containers/profile/ProfileSidebarMenu/index.tsx

@@ -1,14 +1,17 @@
-import React, { VFC } from 'react';
+import React, { useCallback, VFC } from 'react';
 
 import classNames from 'classnames';
 
 import { Filler } from '~/components/containers/Filler';
 import { Group } from '~/components/containers/Group';
 import { Button } from '~/components/input/Button';
+import { Icon } from '~/components/input/Icon';
+import { MenuButton, MenuItemWithIcon } from '~/components/menu';
 import { VerticalMenu } from '~/components/menu/VerticalMenu';
 import { useStackContext } from '~/components/sidebar/SidebarStack';
 import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead';
 import { ProfileStats } from '~/containers/profile/ProfileStats';
+import { useAuth } from '~/hooks/auth/useAuth';
 import markdown from '~/styles/common/markdown.module.scss';
 
 import styles from './styles.module.scss';
@@ -18,8 +21,14 @@ interface ProfileSidebarMenuProps {
 }
 
 const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => {
+  const { logout } = useAuth();
   const { setActiveTab } = useStackContext();
 
+  const onLogout = useCallback(() => {
+    logout();
+    onClose();
+  }, [onClose]);
+
   return (
     <div className={styles.wrap}>
       <div>
@@ -30,8 +39,6 @@ const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => {
         <Group>
           <VerticalMenu className={styles.menu}>
             <VerticalMenu.Item onClick={() => setActiveTab(0)}>Настройки</VerticalMenu.Item>
-            <VerticalMenu.Item onClick={() => setActiveTab(1)}>Заметки</VerticalMenu.Item>
-            <VerticalMenu.Item onClick={() => setActiveTab(2)}>Удалённые посты</VerticalMenu.Item>
           </VerticalMenu>
 
           <div className={styles.stats}>
@@ -40,14 +47,11 @@ const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => {
         </Group>
       </Filler>
 
-      <Group className={styles.buttons}>
-        <Button round onClick={onClose} color="outline">
-          Выйти
-        </Button>
-
-        <Button round onClick={onClose} color="outline-white">
-          Закрыть
-        </Button>
+      <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>
       </Group>
     </div>
   );