added tag searching router

src/containers/main/SidebarRouter/index.tsx

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

src/containers/node/NodeLayout/index.tsx

@@ -31,6 +31,7 @@ import * as NODE_ACTIONS from '~/redux/node/actions';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import { IState } from '~/redux/store';
 import { selectModal } from '~/redux/modal/selectors';
+import { SidebarRouter } from '~/containers/main/SidebarRouter';
 
 const mapStateToProps = (state: IState) => ({
   node: selectNode(state),
@@ -231,6 +232,8 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
 
           <Footer />
         </Card>
+
+        <SidebarRouter prefix="/post:id" />
       </>
     );
   }

src/containers/sidebars/SidebarWrapper/index.tsx

@@ -0,0 +1,28 @@
+import React, { FC, useEffect, useRef } from 'react';
+import styles from './styles.module.scss';
+import { createPortal } from 'react-dom';
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
+
+interface IProps {}
+
+const SidebarWrapper: FC<IProps> = ({ children }) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    disableBodyScroll(ref.current);
+
+    return () => enableBodyScroll(ref.current);
+  }, [ref.current]);
+
+  return createPortal(
+    <div className={styles.wrapper}>
+      <div className={styles.content} ref={ref}>
+        {children}
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export { SidebarWrapper };

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

@@ -0,0 +1,26 @@
+.wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 0, 0, 0.3);
+  display: flex;
+  flex-direction: row;
+  z-index: 20;
+  justify-content: flex-end;
+
+  @include can_backdrop {
+    background: transparentize($content_bg, 0.15);
+    -webkit-backdrop-filter: blur(15px);
+    backdrop-filter: blur(15px);
+  }
+}
+
+.content {
+  flex: 0 0 33vw;
+  width: 33vw;
+  height: 100%;
+  overflow: auto;
+  background: $content_bg;
+}

src/containers/sidebars/TagSidebar/index.tsx

@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper';
+
+interface IProps {}
+
+const TagSidebar: FC<IProps> = () => <SidebarWrapper>TAGS</SidebarWrapper>;
+
+export { TagSidebar };