added tag searching router

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