moved tags to sidebar (#135)

src/components/node/NodeRelatedBlock/index.tsx

@@ -1,12 +1,14 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 
 import { Pressable } from '~/components/common/Pressable';
 import { NodeRelated } from '~/components/node/NodeRelated';
 import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder';
 import { Dialog } from '~/constants/modal';
 import { useShowModal } from '~/hooks/modal/useShowModal';
-import { INode } from '~/types';
+import { useTagSidebar } from '~/hooks/sidebar/useTagSidebar';
+import { INode, ITag } from '~/types';
 import { INodeRelated } from '~/types/node';
+import { useSidebar } from '~/utils/providers/SidebarProvider';
 
 interface IProps {
   isLoading: boolean;
@@ -15,7 +17,7 @@ interface IProps {
 }
 
 const NodeRelatedBlock: FC<IProps> = ({ isLoading, node, related }) => {
-  const goToTag = useShowModal(Dialog.TagSidebar);
+  const goToTag = useTagSidebar();
 
   if (isLoading) {
     return <NodeRelatedPlaceholder />;
@@ -27,10 +29,12 @@ const NodeRelatedBlock: FC<IProps> = ({ isLoading, node, related }) => {
         related.albums &&
         !!node?.id &&
         Object.keys(related.albums)
-          .filter(album => related.albums[album].length > 0)
-          .map(album => (
+          .filter((album) => related.albums[album].length > 0)
+          .map((album) => (
             <NodeRelated
-              title={<Pressable onClick={() => goToTag({ tag: album })}>{album}</Pressable>}
+              title={
+                <Pressable onClick={() => goToTag(album)}>{album}</Pressable>
+              }
               items={related.albums[album]}
               key={album}
             />

src/components/sidebar/SidebarStackCard/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, ReactNode, useMemo } from 'react';
 
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';
@@ -8,7 +8,7 @@ import styles from './styles.module.scss';
 interface SidebarStackCardProps {
   width?: number;
   headerFeature?: 'back' | 'close';
-  title?: string;
+  title?: ReactNode;
   onBackPress?: () => void;
 }
 
@@ -26,7 +26,9 @@ const SidebarStackCard: FC<SidebarStackCardProps> = ({
     <div style={style} className={styles.card}>
       {!!(headerFeature || title) && (
         <div className={styles.head}>
-          <Filler>{!!title && <h6>{title}</h6>}</Filler>
+          <Filler className={styles.title}>
+            {typeof title === 'string' ? <h6>{title}</h6> : title}
+          </Filler>
 
           {!!(headerFeature && onBackPress) && (
             <Button color="link" iconRight={backIcon} onClick={onBackPress} />

src/components/sidebar/SidebarStackCard/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .card {
   width: 100vw;
@@ -28,3 +28,8 @@
   flex-direction: column;
   overflow: hidden;
 }
+
+.title {
+  display: flex;
+  align-items: center;
+}

src/components/sidebar/SidebarWrapper/index.tsx

@@ -0,0 +1,45 @@
+import React, { FC, ReactNode, useEffect, useRef } from 'react';
+
+import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock';
+
+import { useCloseOnEscape } from '~/hooks';
+
+import styles from './styles.module.scss';
+
+interface IProps {
+  onClose?: () => void;
+  closeOnBackdropClick?: boolean;
+  backdrop?: ReactNode;
+}
+
+const SidebarWrapper: FC<IProps> = ({
+  children,
+  onClose,
+  closeOnBackdropClick = true,
+  backdrop,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useCloseOnEscape(onClose);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    disableBodyScroll(ref.current, { reserveScrollBarGap: true });
+
+    return () => clearAllBodyScrollLocks();
+  }, []);
+
+  return (
+    <div className={styles.wrapper} ref={ref}>
+      {(closeOnBackdropClick || backdrop) && (
+        <div className={styles.backdrop} onClick={onClose}>
+          {backdrop}
+        </div>
+      )}
+
+      {children}
+    </div>
+  );
+};
+
+export { SidebarWrapper };

src/components/sidebar/SidebarWrapper/styles.module.scss

@@ -0,0 +1,35 @@
+@import "src/styles/variables";
+
+@keyframes appear {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes slideIn {
+  100% { transform: translate(0, 0); }
+}
+
+.wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  z-index: 26;
+  justify-content: flex-end;
+  overflow: hidden;
+  animation: appear 0.25s forwards;
+
+  & > * {
+    z-index: 4;
+  }
+}
+
+.backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  cursor: pointer;
+}