added sample profile sidebar settings

src/containers/profile/ProfileSidebarMenu/index.tsx

@@ -0,0 +1,67 @@
+import React, { VFC } from 'react';
+import styles from './styles.module.scss';
+import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead';
+import { Filler } from '~/components/containers/Filler';
+import classNames from 'classnames';
+import markdown from '~/styles/common/markdown.module.scss';
+import { Group } from '~/components/containers/Group';
+import { Grid } from '~/components/containers/Grid';
+import { Card } from '~/components/containers/Card';
+import { Square } from '~/components/common/Square';
+import { Button } from '~/components/input/Button';
+
+interface ProfileSidebarMenuProps {
+  onClose: () => void;
+}
+
+const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => (
+  <div className={styles.wrap}>
+    <div>
+      <ProfileSidebarHead />
+    </div>
+
+    <Filler className={classNames(markdown.wrapper, styles.text)}>
+      <Group>
+        <ul className={styles.menu}>
+          <li>Настройки</li>
+          <li>Заметки</li>
+          <li>Удалённые посты</li>
+        </ul>
+
+        <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={onClose} color="secondary">
+      Закрыть
+    </Button>
+  </div>
+);
+
+export { ProfileSidebarMenu };

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

@@ -0,0 +1,42 @@
+@import "../../../styles/variables";
+
+.wrap {
+  padding: $gap;
+  box-sizing: border-box;
+}
+
+.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;
+    }
+  }
+}