added settings tab to profile

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

@@ -3,6 +3,7 @@ $pad_usual: mix(white, $content_bg, 10%);
 
 .wrap {
   padding: $gap;
+  z-index: 4;
 }
 
 .pad {

src/components/profile/ProfileSidebarMenu/index.tsx

@@ -1,15 +1,18 @@
 import React, { FC } from 'react';
 import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
+import { Link } from 'react-router-dom';
 
-interface IProps {}
+interface IProps {
+  path: string;
+}
 
-const ProfileSidebarMenu: FC<IProps> = () => (
+const ProfileSidebarMenu: FC<IProps> = ({ path }) => (
   <div className={styles.wrap}>
-    <div className={styles.row}>
+    <Link className={styles.row} to={`${path}/settings`}>
       <Icon icon="settings" />
       <span>Настройки</span>
-    </div>
+    </Link>
 
     <div className={styles.row}>
       <Icon icon="messages" />

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

@@ -22,6 +22,9 @@
   justify-content: flex-start;
   height: 30px;
   opacity: 0.5;
+  text-decoration: none;
+  fill: white;
+  color: white;
 
   &:hover {
     background-color: transparentize($wisegreen, 0.5);

src/components/profile/ProfileSidebarSettings/index.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+import { ProfileSettings } from '~/components/profile/ProfileSettings';
+import styles from './styles.module.scss';
+import { Filler } from '~/components/containers/Filler';
+import { Button } from '~/components/input/Button';
+
+interface IProps {}
+
+const ProfileSidebarSettings: FC<IProps> = () => (
+  <div className={styles.wrap}>
+    <div className={styles.scroller}>
+      <ProfileSettings />
+    </div>
+    <div className={styles.buttons}>
+      <Filler />
+      <Button color="outline">Отмена</Button>
+      <Button>Сохранить</Button>
+    </div>
+  </div>
+);
+
+export { ProfileSidebarSettings };

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

@@ -0,0 +1,24 @@
+.wrap {
+  @include sidebar_content(600px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  z-index: 4;
+}
+
+.scroller {
+  flex: 1;
+  overflow: auto;
+  padding: $gap;
+}
+
+.buttons {
+  width: 100%;
+  padding: $gap;
+  box-shadow: $sidebar_border 0 -1px;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  grid-column-gap: $gap;
+}