added working profile sidebar

src/components/profile/ProfileSidebarSettings/index.tsx

@@ -3,23 +3,34 @@ import React, { FC } from 'react';
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';
 import { ProfileSettings } from '~/components/profile/ProfileSettings';
+import { useStackContext } from '~/components/sidebar/SidebarStack';
+import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
 
 import styles from './styles.module.scss';
 
 interface IProps {}
 
-const ProfileSidebarSettings: FC<IProps> = () => (
-  <div className={styles.wrap}>
-    <div className={styles.scroller}>
-      <ProfileSettings />
-    </div>
+const ProfileSidebarSettings: FC<IProps> = () => {
+  const { closeAllTabs } = useStackContext();
 
-    <div className={styles.buttons}>
-      <Filler />
-      <Button color="outline">Отмена</Button>
-      <Button>Сохранить</Button>
-    </div>
-  </div>
-);
+  return (
+    <SidebarStackCard width={600} headerFeature="back" title="Настройки" onBackPress={closeAllTabs}>
+      <div className={styles.wrap}>
+        <div className={styles.scroller}>
+          <ProfileSettings />
+        </div>
+
+        <div className={styles.buttons}>
+          <Filler />
+          <Button color="outline" onClick={closeAllTabs}>
+            Отмена
+          </Button>
+
+          <Button color="secondary">Сохранить</Button>
+        </div>
+      </div>
+    </SidebarStackCard>
+  );
+};
 
 export { ProfileSidebarSettings };

src/components/profile/ProfileSidebarSettings/styles.module.scss

@@ -6,6 +6,7 @@
   justify-content: center;
   flex-direction: column;
   z-index: 4;
+  height: 100%;
 }
 
 .scroller {
@@ -15,6 +16,8 @@
 }
 
 .buttons {
+  @include outer_shadow;
+
   width: 100%;
   padding: $gap;
   box-sizing: border-box;