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>