added settings tab to profile

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>
+      {children}
     </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;