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

src/containers/sidebars/ProfileSidebar/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect } from 'react';
+import React, { FC, useCallback, useEffect, useState } from 'react';
 import styles from './styles.module.scss';
 import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper';
 import { connect } from 'react-redux';
@@ -6,10 +6,13 @@ import { selectAuthProfile, selectAuthUser } from '~/redux/auth/selectors';
 import pick from 'ramda/es/pick';
 import { ProfileSidebarInfo } from '~/components/profile/ProfileSidebarInfo';
 import { Filler } from '~/components/containers/Filler';
-import { useHistory, useRouteMatch } from 'react-router';
+import { Route, Switch, useHistory, useRouteMatch } from 'react-router';
 import * as USER_ACTIONS from '~/redux/auth/actions';
 import { ProfileSidebarMenu } from '~/components/profile/ProfileSidebarMenu';
 import { useCloseOnEscape } from '~/utils/hooks';
+import { Icon } from '~/components/input/Icon';
+import { ProfileSidebarSettings } from '~/components/profile/ProfileSidebarSettings';
+import classNames from 'classnames';
 
 const mapStateToProps = state => ({
   profile: selectAuthProfile(state),
@@ -23,7 +26,7 @@ const mapDispatchToProps = {
 type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
 const ProfileSidebarUnconnected: FC<Props> = ({
-  profile: { is_loading, user, tab },
+  profile: { is_loading, user },
   user: { id },
   authLoadProfile,
 }) => {
@@ -39,13 +42,22 @@ const ProfileSidebarUnconnected: FC<Props> = ({
   const history = useHistory();
   const basePath = url.replace(new RegExp(`\/~${username}$`), '');
   const onClose = useCallback(() => history.push(basePath), [basePath]);
+
   useCloseOnEscape(onClose);
 
   return (
     <SidebarWrapper>
-      <div className={styles.wrap}>
+      <div className={styles.close} onClick={onClose}>
+        <Icon icon="close" size={32} />
+      </div>
+
+      <Switch>
+        <Route path={`${url}/settings`} component={ProfileSidebarSettings} />
+      </Switch>
+
+      <div className={classNames(styles.wrap, styles.secondary)}>
         <ProfileSidebarInfo is_loading={is_loading} user={user} />
-        <ProfileSidebarMenu />
+        <ProfileSidebarMenu path={url} />
         <Filler />
       </div>
     </SidebarWrapper>

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

@@ -1,5 +1,31 @@
 .wrap {
   @include sidebar_content;
+
   display: flex;
   flex-direction: column;
+  position: relative;
+  z-index: 2;
+
+  &.secondary {
+    background: transparentize($content_bg, 0.2);
+  }
+}
+
+.close {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: $gap / 2;
+  background: $content_bg;
+  z-index: 6;
+  border-radius: 0 0 0 $radius;
+  cursor: pointer;
+  transition: all 100ms;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    fill: $red;
+  }
 }

src/containers/sidebars/SidebarWrapper/index.tsx

@@ -21,11 +21,9 @@ const SidebarWrapper: FC<IProps> = ({ children, onClose }) => {
   }, [ref.current]);
 
   return createPortal(
-    <div className={styles.wrapper}>
+    <div className={styles.wrapper} ref={ref}>
       <div className={styles.clicker} onClick={onClose} />
-      <div className={styles.content} ref={ref}>
       {children}
-      </div>
     </div>,
     document.body
   );

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

@@ -24,10 +24,6 @@
 }
 
 .content {
-  flex: 0 1 33vw;
-  width: 33vw;
-  min-width: 480px;
-  max-width: 100vw;
   height: 100%;
   overflow: auto;
   display: flex;

src/styles/variables.scss

@@ -203,7 +203,7 @@ $sidebar_border: transparentize(white, 0.95);
   height: 100%;
   box-sizing: border-box;
   display: flex;
-  flex: 0 1 400px;
+  flex: 0 1 $width;
   max-width: 100vw;
   position: relative;
   background: transparentize($content_bg, 0.4);