made better sidebar logout button

src/components/menu/MenuButton/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useState } from 'react';
+import React, { FC, ReactNode, useEffect, useState } from 'react';
 
 import { Placement } from '@popperjs/core';
 import classNames from 'classnames';
@@ -56,6 +56,10 @@ const MenuButton: FC<MenuButtonProps> = ({
 
   const visible = activate === 'focus' ? focus.focused : hover.focused;
 
+  useEffect(() => {
+    popper.update?.();
+  }, [visible]);
+
   return (
     <>
       <button

src/components/sidebar/SidebarStack/styles.module.scss

@@ -1,7 +1,7 @@
 @import "src/styles/variables";
 
 .stack {
-  background: transparentize($content_bg, 0.1);
+  background: transparentize($content_bg, 0.2);
   display: flex;
   flex-direction: row-reverse;
   width: auto;

src/containers/profile/ProfileSidebarLogoutButton/index.tsx

@@ -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 }

src/containers/profile/ProfileSidebarLogoutButton/styles.module.scss

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

src/containers/profile/ProfileSidebarMenu/index.tsx

@@ -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">
+        <ProfileSidebarLogoutButton onLogout={onLogout}/>
-          <MenuItemWithIcon onClick={onLogout}>Выйти</MenuItemWithIcon>
-        </MenuButton>
       </Group>
     </div>
   );

src/containers/sidebars/ProfileSidebar/index.tsx

@@ -15,7 +15,7 @@ interface ProfileSidebarProps extends DialogComponentProps {
 const ProfileSidebar: VFC<ProfileSidebarProps> = ({ onRequestClose }) => {
   return (
     <SidebarWrapper onClose={onRequestClose}>
-      <SidebarStack initialTab={0}>
+      <SidebarStack>
         <SidebarStackCard headerFeature="close" title="Профиль" onBackPress={onRequestClose}>
           <ProfileSidebarMenu onClose={onRequestClose} />
         </SidebarStackCard>

src/sprites/Sprites.tsx

@@ -415,6 +415,16 @@ const Sprites: FC = () => (
         d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
       />
     </g>
+
+    <g id="logout">
+      <path fill="none" d="M0 0h24v24H0V0z" stroke="none" />
+      <path
+        stroke="none"
+        d="M11 13q.425 0 .713-.288Q12 12.425 12 12t-.287-.713Q11.425 11 11 11t-.712.287Q10 11.575 10 12t.288.712Q10.575 13 11 13Zm-4 8v-2l6-1V6.875q0-.375-.225-.675-.225-.3-.575-.35L7 5V3l5.5.9q1.1.2 1.8 1.025T15 6.85v12.8Zm-4 0v-2h2V5q0-.85.588-1.425Q6.175 3 7 3h10q.85 0 1.425.575Q19 4.15 19 5v14h2v2Zm4-2h10V5H7Z"
+      />
+    </g>
+
+    
   </svg>
 );
 

src/styles/_global.scss

@@ -174,3 +174,7 @@ p {
 #__next {
   min-height: 100vh;
 }
+
+small {
+  font-size: 0.8em;
+}