added empty profile sidebar

src/containers/profile/ProfileInfo/index.tsx

@@ -27,7 +27,9 @@ const ProfileInfo: FC<IProps> = ({ isOwn }) => {
   return (
     <div>
       <Group className={styles.wrap} horizontal>
-        <ProfileAvatar canEdit={isOwn} onChangePhoto={updatePhoto} photo={photo} />
+        <div className={styles.avatar}>
+          <ProfileAvatar canEdit={isOwn} onChangePhoto={updatePhoto} photo={photo} />
+        </div>
 
         <div className={styles.field}>
           <div className={styles.name}>

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

@@ -8,13 +8,6 @@
 }
 
 .avatar {
-  @include outer_shadow();
-
-  border-radius: $radius;
-  width: 100px;
-  height: 100px;
-  background: $content_bg 50% 50% no-repeat;
-  background-size: cover;
   position: absolute;
   bottom: 0;
   left: $gap;

src/containers/profile/ProfileSidebarHead/index.tsx

@@ -0,0 +1,25 @@
+import React, { VFC } from 'react';
+import { Group } from '~/components/containers/Group';
+import { Filler } from '~/components/containers/Filler';
+import { ProfileAvatar } from '~/components/profile/ProfileAvatar';
+import { usePatchUser } from '~/hooks/auth/usePatchUser';
+import { useUser } from '~/hooks/auth/useUser';
+
+interface ProfileSidebarHeadProps {}
+
+const ProfileSidebarHead: VFC<ProfileSidebarHeadProps> = () => {
+  const { user } = useUser();
+  const { updatePhoto } = usePatchUser();
+
+  return (
+    <Group horizontal>
+      <ProfileAvatar canEdit onChangePhoto={updatePhoto} photo={user.photo} size={72} />
+
+      <Filler>
+        <h2>{user.fullname || user.username}</h2>
+      </Filler>
+    </Group>
+  );
+};
+
+export { ProfileSidebarHead };

src/containers/sidebars/ProfileSidebar/index.tsx

@@ -0,0 +1,39 @@
+import React, { VFC } from 'react';
+import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper';
+import styles from './styles.module.scss';
+import { DialogComponentProps } from '~/types/modal';
+import markdown from '~/styles/common/markdown.module.scss';
+import { Button } from '~/components/input/Button';
+import { Filler } from '~/components/containers/Filler';
+import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead';
+import classNames from 'classnames';
+
+interface ProfileSidebarProps extends DialogComponentProps {}
+
+const ProfileSidebar: VFC<ProfileSidebarProps> = ({ onRequestClose }) => {
+  return (
+    <SidebarWrapper onClose={onRequestClose}>
+      <div className={styles.wrap}>
+        <div className={styles.content}>
+          <div>
+            <ProfileSidebarHead />
+          </div>
+
+          <Filler className={classNames(markdown.wrapper, styles.text)}>
+            <h3>Здесь будет профиль</h3>
+
+            <p>
+              Но пока что мы просто тестируем как это будет выглядеть и будет ли это удобнее модалки
+            </p>
+          </Filler>
+
+          <Button round onClick={onRequestClose} color="secondary">
+            Закрыть
+          </Button>
+        </div>
+      </div>
+    </SidebarWrapper>
+  );
+};
+
+export { ProfileSidebar };

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

@@ -0,0 +1,22 @@
+@import "src/styles/variables";
+
+.wrap {
+  @include sidebar_content(400px);
+}
+
+.content {
+  border-radius: $radius;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  width: 100%;
+  max-width: 400px;
+  padding: $gap;
+}
+
+.text {
+  margin-top: $gap * 2;
+}