added sidebar headers

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

@@ -1,7 +1,6 @@
 @import "src/styles/variables";
 
 .wrap {
-  @include sidebar_content(600px);
   display: flex;
   align-items: center;
   justify-content: center;

src/components/sidebar/SidebarStack/index.tsx

@@ -1,5 +1,7 @@
 import React, { FC, useMemo } from 'react';
 import styles from './styles.module.scss';
+import { Button } from '~/components/input/Button';
+import { Filler } from '~/components/containers/Filler';
 
 interface SidebarStackProps {}
 

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

@@ -9,11 +9,10 @@
 }
 
 .card {
-  @include sidebar_content(400px);
-
   box-shadow: transparentize(white, 0.9) -1px 0;
-  max-width: 400px;
+  border-radius: $radius 0 0 $radius;
-  width: 100vw;
+  display: flex;
+  flex-direction: column;
 }
 
 .content {

src/components/sidebar/SidebarStackCard/index.tsx

@@ -0,0 +1,31 @@
+import React, { FC, useMemo } from 'react';
+import styles from './styles.module.scss';
+import { Filler } from '~/components/containers/Filler';
+import { Button } from '~/components/input/Button';
+
+interface SidebarStackCardProps {
+  width?: number;
+  headerFeature?: 'back' | 'close';
+  title?: string;
+}
+
+const SidebarStackCard: FC<SidebarStackCardProps> = ({ children, title, width, headerFeature }) => {
+  const style = useMemo(() => ({ maxWidth: width, flexBasis: width }), [width]);
+
+  return (
+    <div style={style} className={styles.card}>
+      {(headerFeature || title) && (
+        <div className={styles.head}>
+          <Filler>{!!title && <h5>{title}</h5>}</Filler>
+
+          {headerFeature === 'back' && <Button color="link" iconRight="right" />}
+          {headerFeature === 'close' && <Button color="link" iconRight="close" />}
+        </div>
+      )}
+
+      <Filler>{children}</Filler>
+    </div>
+  );
+};
+
+export { SidebarStackCard };

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

@@ -0,0 +1,17 @@
+@import "src/styles/variables";
+
+.card {
+  width: 100vw;
+  max-width: 400px;
+  flex-basis: 400px;
+  flex: 1;
+}
+
+.head {
+  @include row_shadow;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: $gap $gap $gap $gap * 2;
+}

src/containers/sidebars/ProfileSidebar/index.tsx

@@ -4,6 +4,7 @@ import { DialogComponentProps } from '~/types/modal';
 import { ProfileSidebarMenu } from '~/containers/profile/ProfileSidebarMenu';
 import { SidebarStack } from '~/components/sidebar/SidebarStack';
 import { ProfileSidebarSettings } from '~/components/profile/ProfileSidebarSettings';
+import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
 
 interface ProfileSidebarProps extends DialogComponentProps {}
 
@@ -11,8 +12,13 @@ const ProfileSidebar: VFC<ProfileSidebarProps> = ({ onRequestClose }) => {
   return (
     <SidebarWrapper onClose={onRequestClose}>
       <SidebarStack>
-        <ProfileSidebarMenu onClose={onRequestClose} />
+        <SidebarStackCard headerFeature="close" title="Профиль">
-        <ProfileSidebarSettings />
+          <ProfileSidebarMenu onClose={onRequestClose} />
+        </SidebarStackCard>
+
+        <SidebarStackCard width={600} headerFeature="back" title="Настройки">
+          <ProfileSidebarSettings />
+        </SidebarStackCard>
       </SidebarStack>
     </SidebarWrapper>
   );