added sample data to profile sidebar

src/components/common/Square/index.tsx

@@ -1,26 +1,29 @@
-import React, { forwardRef, ForwardRefRenderFunction, VFC } from 'react';
+import React, { forwardRef } from 'react';
 import styles from './styles.module.scss';
 import { DivProps } from '~/utils/types';
 import classNames from 'classnames';
 
 interface SquareProps extends DivProps {
-  image: string;
+  image?: string;
   size?: number;
 }
 
-const Square = forwardRef<HTMLDivElement, SquareProps>(({ image, size, ...rest }, ref) => {
-  const backgroundImage = image ? `url('${image}')` : undefined;
+const Square = forwardRef<HTMLDivElement, SquareProps>(
+  ({ image, size, children, ...rest }, ref) => {
+    const backgroundImage = image ? `url('${image}')` : undefined;
 
-  return (
-    <div
-      {...rest}
-      className={classNames(styles.wrapper, rest.className)}
-      style={{ backgroundImage, width: size }}
-      ref={ref}
-    >
-      <svg className={styles.svg} viewBox="0 0 1 1" />
-    </div>
-  );
-});
+    return (
+      <div
+        {...rest}
+        className={classNames(styles.wrapper, rest.className)}
+        style={{ backgroundImage, width: size }}
+        ref={ref}
+      >
+        <svg className={styles.svg} viewBox="0 0 1 1" />
+        {!!children && <div className={styles.content}>{children}</div>}
+      </div>
+    );
+  }
+);
 
 export { Square };

src/components/common/Square/styles.module.scss

@@ -9,4 +9,13 @@
   border-radius: $radius;
   background-size: cover;
   background-repeat: no-repeat;
+  position: relative;
+}
+
+.content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }

src/containers/sidebars/ProfileSidebar/index.tsx

@@ -7,10 +7,18 @@ import { Button } from '~/components/input/Button';
 import { Filler } from '~/components/containers/Filler';
 import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead';
 import classNames from 'classnames';
+import { Group } from '~/components/containers/Group';
+import { Card } from '~/components/containers/Card';
+import { Grid } from '~/components/containers/Grid';
+import { Square } from '~/components/common/Square';
+import { Padder } from '~/components/containers/Padder';
+import { useUser } from '~/hooks/auth/useUser';
 
 interface ProfileSidebarProps extends DialogComponentProps {}
 
 const ProfileSidebar: VFC<ProfileSidebarProps> = ({ onRequestClose }) => {
+  const { user } = useUser();
+
   return (
     <SidebarWrapper onClose={onRequestClose}>
       <div className={styles.wrap}>
@@ -20,11 +28,41 @@ const ProfileSidebar: VFC<ProfileSidebarProps> = ({ onRequestClose }) => {
           </div>
 
           <Filler className={classNames(markdown.wrapper, styles.text)}>
-            <h3>Здесь будет профиль</h3>
+            <Group>
+              <ul className={styles.menu}>
+                <li>Настройки</li>
+                <li>Заметки</li>
+                <li>Удалённые посты</li>
+              </ul>
 
-            <p>
-              Но пока что мы просто тестируем как это будет выглядеть и будет ли это удобнее модалки
-            </p>
+              <Grid columns="2fr 1fr">
+                <Card>
+                  <h4>1 год 2 месяца</h4>
+                  <small>в убежище</small>
+                </Card>
+
+                <Card>
+                  <Square>
+                    <h4>24 поста</h4>
+                    <small>Создано</small>
+                  </Square>
+                </Card>
+              </Grid>
+
+              <Grid columns="1fr 2fr">
+                <Card>
+                  <Square>
+                    <h4>16545 лайка</h4>
+                    <small>получено</small>
+                  </Square>
+                </Card>
+
+                <Card>
+                  <h4>123123 комментария</h4>
+                  <small>под постами</small>
+                </Card>
+              </Grid>
+            </Group>
           </Filler>
 
           <Button round onClick={onRequestClose} color="secondary">

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

@@ -20,3 +20,35 @@
 .text {
   margin-top: $gap * 2;
 }
+
+.menu {
+  @include outer_shadow;
+
+  list-style: none;
+  border-radius: $radius;
+  padding: 0 !important;
+
+  & > li {
+    @include row_shadow;
+
+    list-style: none;
+    margin: 0 !important;
+    padding: $gap;
+    font: $font_16_semibold;
+    cursor: pointer;
+    background-color: transparentize($secondary, 1);
+    transition: background-color 0.25s;
+
+    &:hover {
+      background-color: transparentize($secondary, 0.5);
+    }
+
+    &:first-child {
+      border-radius: $radius $radius 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 0 $radius $radius;
+    }
+  }
+}