added empty profile sidebar

src/components/boris/BorisUIDemo/index.tsx

@@ -5,11 +5,14 @@ import markdown from '~/styles/common/markdown.module.scss';
 import { Group } from '~/components/containers/Group';
 import { Button } from '~/components/input/Button';
 import { InputText } from '~/components/input/InputText';
+import { useShowModal } from '~/hooks/modal/useShowModal';
+import { Dialog } from '~/constants/modal';
 
 interface IProps {}
 
 const BorisUIDemo: FC<IProps> = () => {
   const [text, setText] = useState('');
+  const openProfileSidebar = useShowModal(Dialog.ProfileSidebar);
 
   return (
     <Card className={styles.card}>
@@ -20,6 +23,9 @@ const BorisUIDemo: FC<IProps> = () => {
           разработке
         </p>
 
+        <h2>Тестовые фичи</h2>
+        <Button onClick={() => openProfileSidebar({})}>Профиль в сайдбаре</Button>
+
         <h2>Инпуты</h2>
 
         <form autoComplete="off">

src/components/node/NodeImageSwiperBlock/styles.module.scss

@@ -25,6 +25,8 @@
 
   :global(.swiper-button-next),
   :global(.swiper-button-prev) {
+    @include outer_shadow;
+
     color: white;
     font-size: 10px;
     width: 40px;

src/components/profile/ProfileAvatar/index.tsx

@@ -2,17 +2,17 @@ import React, { ChangeEvent, FC, useCallback } from 'react';
 import styles from './styles.module.scss';
 import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
-import { Icon } from '~/components/input/Icon';
 import { IFile } from '~/types';
 import { Button } from '~/components/input/Button';
 
 export interface ProfileAvatarProps {
+  size?: number;
   canEdit: boolean;
   photo?: IFile;
   onChangePhoto: (file: File) => void;
 }
 
-const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit }) => {
+const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit, size }) => {
   const onInputChange = useCallback(
     async (event: ChangeEvent<HTMLInputElement>) => {
       if (!event.target.files?.length) {
@@ -31,6 +31,8 @@ const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit }
       className={styles.avatar}
       style={{
         backgroundImage,
+        width: size,
+        height: size,
       }}
     >
       {canEdit && <input type="file" onInput={onInputChange} />}

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

@@ -8,10 +8,8 @@
   height: 100px;
   background: $content_bg 50% 50% no-repeat;
   background-size: cover;
-  position: absolute;
-  bottom: 0;
-  left: $gap;
   cursor: pointer;
+  position: relative;
 
   input {
     position: absolute;

src/constants/modal/index.ts

@@ -9,6 +9,7 @@ import { PhotoSwipe } from '~/containers/dialogs/PhotoSwipe';
 import { EditorCreateDialog } from '~/containers/dialogs/EditorCreateDialog';
 import { EditorEditDialog } from '~/containers/dialogs/EditorEditDialog';
 import { TagSidebar } from '~/containers/sidebars/TagSidebar';
+import { ProfileSidebar } from '~/containers/sidebars/ProfileSidebar';
 
 export enum Dialog {
   Login = 'Login',
@@ -22,6 +23,7 @@ export enum Dialog {
   CreateNode = 'CreateNode',
   EditNode = 'EditNode',
   TagSidebar = 'TagNodes',
+  ProfileSidebar = 'ProfileSidebar',
 }
 
 export const DIALOG_CONTENT = {
@@ -36,4 +38,5 @@ export const DIALOG_CONTENT = {
   [Dialog.CreateNode]: EditorCreateDialog,
   [Dialog.EditNode]: EditorEditDialog,
   [Dialog.TagSidebar]: TagSidebar,
+  [Dialog.ProfileSidebar]: ProfileSidebar,
 } as const;

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;
+}

src/styles/_global.scss

@@ -128,3 +128,36 @@ button {
   background-color: transparent;
   outline: none;
 }
+
+h5, h4, h3, h2, h1 {
+  color: white;
+  font-weight: 800;
+}
+
+h1 {
+  font-size: 2em;
+}
+
+h2 {
+  font-size: 1.8em;
+}
+
+h3 {
+  font-size: 1.6em;
+}
+
+h4 {
+  font-size: 1.4em;
+}
+
+h5 {
+  font-size: 1.2em;
+}
+
+p {
+  margin-bottom: $gap;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}

src/styles/common/markdown.module.scss

@@ -53,17 +53,7 @@ $margin: 1em;
     margin-bottom: $margin;
   }
 
-  p {
-    margin-bottom: $margin;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
   h5, h4, h3, h2, h1 {
-    color: white;
-    font-weight: 800;
     line-height: 1.2em;
     margin: $margin * 1.5 0 $margin / 2;
 
@@ -72,26 +62,6 @@ $margin: 1em;
     }
   }
 
-  h1 {
-    font-size: 2em;
-  }
-
-  h2 {
-    font-size: 1.8em;
-  }
-
-  h3 {
-    font-size: 1.6em;
-  }
-
-  h4 {
-    font-size: 1.4em;
-  }
-
-  h5 {
-    font-size: 1.2em;
-  }
-
   ul {
     list-style: disc;
     padding-left: 20px;