added profile sidebar just to test if I can

src/containers/main/SidebarRouter/index.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { Route, Switch } from 'react-router';
 import { TagSidebar } from '~/containers/sidebars/TagSidebar';
+import { ProfileSidebar } from '~/containers/sidebars/ProfileSidebar';
 
 interface IProps {
   prefix?: string;
@@ -9,6 +10,7 @@ interface IProps {
 const SidebarRouter: FC<IProps> = ({ prefix = '' }) => (
   <Switch>
     <Route path={`${prefix}/tag/:tag`} component={TagSidebar} />
+    <Route path={`${prefix}/~:username`} component={ProfileSidebar} />
   </Switch>
 );
 

src/containers/sidebars/ProfileSidebar/index.tsx

@@ -0,0 +1,57 @@
+import React, { FC, useCallback, useEffect } from 'react';
+import styles from './styles.module.scss';
+import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper';
+import { connect } from 'react-redux';
+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 * as USER_ACTIONS from '~/redux/auth/actions';
+import { ProfileSidebarMenu } from '~/components/profile/ProfileSidebarMenu';
+import { useCloseOnEscape } from '~/utils/hooks';
+
+const mapStateToProps = state => ({
+  profile: selectAuthProfile(state),
+  user: pick(['id'], selectAuthUser(state)),
+});
+
+const mapDispatchToProps = {
+  authLoadProfile: USER_ACTIONS.authLoadProfile,
+};
+
+type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
+
+const ProfileSidebarUnconnected: FC<Props> = ({
+  profile: { is_loading, user, tab },
+  user: { id },
+  authLoadProfile,
+}) => {
+  const {
+    params: { username },
+    url,
+  } = useRouteMatch<{ username: string }>();
+
+  useEffect(() => {
+    authLoadProfile(username);
+  }, [username]);
+
+  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}>
+        <ProfileSidebarInfo is_loading={is_loading} user={user} />
+        <ProfileSidebarMenu />
+        <Filler />
+      </div>
+    </SidebarWrapper>
+  );
+};
+
+const ProfileSidebar = connect(mapStateToProps, mapDispatchToProps)(ProfileSidebarUnconnected);
+
+export { ProfileSidebar };

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

@@ -0,0 +1,5 @@
+.wrap {
+  @include sidebar_content;
+  display: flex;
+  flex-direction: column;
+}

src/containers/sidebars/TagSidebar/index.tsx

@@ -31,6 +31,7 @@ const TagSidebarUnconnected: FC<Props> = ({ nodes, tagLoadNodes, tagSetNodes })
   const history = useHistory();
 
   const basePath = url.replace(new RegExp(`\/tag\/${tag}$`), '');
+  const onClose = useCallback(() => history.push(basePath), [basePath]);
 
   useEffect(() => {
     tagLoadNodes(tag);
@@ -45,7 +46,6 @@ const TagSidebarUnconnected: FC<Props> = ({ nodes, tagLoadNodes, tagSetNodes })
   const title = useMemo(() => decodeURIComponent(tag), [tag]);
   const progress = nodes.count > 0 ? `${(nodes.list.length / nodes.count) * 100}%` : '0';
 
-  const onClose = useCallback(() => history.push(basePath), [basePath]);
   const hasMore = nodes.count > nodes.list.length;
 
   return (

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

@@ -1,12 +1,5 @@
 .wrap {
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex: 0 1 400px;
-  max-width: 100vw;
-  position: relative;
-
-  @include sidebar_content;
+  @include sidebar_content(400px);
 }
 
 .content {