added working profile sidebar

src/containers/sidebars/ProfileSidebar/index.tsx

@@ -1,5 +1,6 @@
 import React, { VFC } from 'react';
 
+import { Tabs } from '~/components/dialogs/Tabs';
 import { ProfileSidebarSettings } from '~/components/profile/ProfileSidebarSettings';
 import { SidebarStack } from '~/components/sidebar/SidebarStack';
 import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
@@ -13,13 +14,13 @@ const ProfileSidebar: VFC<ProfileSidebarProps> = ({ onRequestClose }) => {
   return (
     <SidebarWrapper onClose={onRequestClose}>
       <SidebarStack>
-        <SidebarStackCard headerFeature="close" title="Профиль">
+        <SidebarStackCard headerFeature="close" title="Профиль" onBackPress={onRequestClose}>
           <ProfileSidebarMenu onClose={onRequestClose} />
         </SidebarStackCard>
 
-        <SidebarStackCard width={600} headerFeature="back" title="Настройки">
+        <SidebarStack.Cards>
           <ProfileSidebarSettings />
-        </SidebarStackCard>
+        </SidebarStack.Cards>
       </SidebarStack>
     </SidebarWrapper>
   );

src/containers/sidebars/SidebarWrapper/index.tsx

@@ -8,9 +8,10 @@ import styles from './styles.module.scss';
 
 interface IProps {
   onClose?: () => void;
+  closeOnBackdropClick?: boolean;
 }
 
-const SidebarWrapper: FC<IProps> = ({ children, onClose }) => {
+const SidebarWrapper: FC<IProps> = ({ children, onClose, closeOnBackdropClick = true }) => {
   const ref = useRef<HTMLDivElement>(null);
 
   useCloseOnEscape(onClose);
@@ -24,6 +25,7 @@ const SidebarWrapper: FC<IProps> = ({ children, onClose }) => {
 
   return (
     <div className={styles.wrapper} ref={ref}>
+      {closeOnBackdropClick && <div className={styles.backdrop} onClick={onClose} />}
       {children}
     </div>
   );

src/containers/sidebars/SidebarWrapper/styles.module.scss

@@ -23,3 +23,13 @@
     z-index: 4;
   }
 }
+
+.backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  cursor: pointer;
+}