made tags panel

src/containers/sidebars/SidebarWrapper/index.tsx

@@ -2,21 +2,27 @@ 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';
+import { useCloseOnEscape } from '~/utils/hooks';
 
-interface IProps {}
+interface IProps {
+  onClose?: () => void;
+}
 
-const SidebarWrapper: FC<IProps> = ({ children }) => {
+const SidebarWrapper: FC<IProps> = ({ children, onClose }) => {
   const ref = useRef<HTMLDivElement>(null);
 
+  useCloseOnEscape(onClose);
+
   useEffect(() => {
     if (!ref.current) return;
-    disableBodyScroll(ref.current);
+    disableBodyScroll(ref.current, { reserveScrollBarGap: true });
 
     return () => enableBodyScroll(ref.current);
   }, [ref.current]);
 
   return createPortal(
     <div className={styles.wrapper}>
+      <div className={styles.clicker} onClick={onClose} />
       <div className={styles.content} ref={ref}>
         {children}
       </div>

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

@@ -1,3 +1,12 @@
+@keyframes appear {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes slideIn {
+  100% { transform: translate(0, 0); }
+}
+
 .wrapper {
   position: fixed;
   top: 0;
@@ -9,6 +18,8 @@
   flex-direction: row;
   z-index: 20;
   justify-content: flex-end;
+  overflow: hidden;
+  animation: appear 0.25s forwards;
 
   @include can_backdrop {
     background: transparentize($content_bg, 0.15);
@@ -18,9 +29,27 @@
 }
 
 .content {
-  flex: 0 0 33vw;
+  flex: 0 1 33vw;
   width: 33vw;
+  min-width: 480px;
+  max-width: 100vw;
   height: 100%;
   overflow: auto;
-  background: $content_bg;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  animation: slideIn 0.5s 0.1s forwards;
+  transform: translate(100%, 0);
+  position: relative;
+  z-index: 2;
+}
+
+.clicker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  cursor: pointer;
 }