removed all router-modals

src/containers/sidebars/SidebarWrapper/index.tsx

@@ -20,13 +20,10 @@ const SidebarWrapper: FC<IProps> = ({ children, onClose }) => {
     return () => clearAllBodyScrollLocks();
   }, []);
 
-  return createPortal(
+  return (
     <div className={styles.wrapper} ref={ref}>
-      <div className={styles.clicker} onClick={onClose} />
-
       {children}
-    </div>,
-    document.body
+    </div>
   );
 };
 

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

@@ -10,9 +10,6 @@
 }
 
 .wrapper {
-  position: fixed;
-  top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
   display: flex;
@@ -22,19 +19,7 @@
   overflow: hidden;
   animation: appear 0.25s forwards;
 
-  @include sidebar;
-
   & > * {
     z-index: 4;
   }
 }
-
-.clicker {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  cursor: pointer;
-}

src/containers/sidebars/TagSidebar/index.tsx

@@ -1,7 +1,6 @@
-import React, { useCallback, useMemo, VFC } from 'react';
+import React, { useMemo, VFC } from 'react';
 import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper';
 import styles from './styles.module.scss';
-import { useHistory, useRouteMatch } from 'react-router';
 import { Icon } from '~/components/input/Icon';
 import { Link } from 'react-router-dom';
 import { TagSidebarList } from '~/components/sidebar/TagSidebarList';
@@ -9,21 +8,18 @@ import { LoaderCircle } from '~/components/input/LoaderCircle';
 import { InfiniteScroll } from '~/components/containers/InfiniteScroll';
 import { Tag } from '~/components/tags/Tag';
 import { useTagNodes } from '~/hooks/tag/useTagNodes';
+import { DialogComponentProps } from '~/types/modal';
 
-const TagSidebar: VFC = () => {
-  const {
-    params: { tag },
-    url,
-  } = useRouteMatch<{ tag: string }>();
-  const history = useHistory();
+interface TagSidebarProps extends DialogComponentProps {
+  tag: string;
+}
 
-  const basePath = url.replace(new RegExp(`/tag/${tag}$`), '');
-  const onClose = useCallback(() => history.push(basePath), [basePath, history]);
+const TagSidebar: VFC<TagSidebarProps> = ({ tag, onRequestClose }) => {
   const { nodes, hasMore, isLoading, loadMore } = useTagNodes(tag);
   const title = useMemo(() => decodeURIComponent(tag), [tag]);
 
   return (
-    <SidebarWrapper onClose={onClose}>
+    <SidebarWrapper onClose={onRequestClose}>
       <div className={styles.wrap}>
         <div className={styles.content}>
           <div className={styles.head}>
@@ -38,9 +34,9 @@ const TagSidebar: VFC = () => {
             )}
 
             <div className={styles.close}>
-              <Link to={basePath}>
+              <button onClick={onRequestClose}>
                 <Icon icon="close" size={32} />
-              </Link>
+              </button>
             </div>
           </div>