Usernav to be reused

components/ui/ClickOutside/ClickOutside.tsx

@@ -0,0 +1,38 @@
+import React, {
+  FunctionComponent,
+  MutableRefObject,
+  useEffect,
+  useRef,
+} from "react";
+import { findDOMNode } from "react-dom";
+
+export interface ClickOutsideProps {
+  onClickOutside: (e?: MouseEvent) => void;
+  children: React.ReactNode | any;
+}
+
+const ClickOutside: FunctionComponent<ClickOutsideProps> = ({
+  children,
+  onClickOutside,
+}) => {
+  let node = useRef(null);
+
+  const handleClick = (e: MouseEvent) => {
+    console.log("eeee");
+    if (!e || !node.current.contains(e.target as HTMLInputElement)) {
+      console.log("eeee");
+      // onClickOutside && onClickOutside(e);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("click", handleClick, true);
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  });
+
+  return children;
+};
+
+export default ClickOutside;

components/ui/ClickOutside/index.ts

@@ -0,0 +1 @@
+export { default } from "./ClickOutside";

components/ui/Sidebar/Sidebar.tsx

@@ -5,13 +5,21 @@ import s from "./Sidebar.module.css";
 interface Props {
   className?: string;
   children?: any;
+  closeSidebar: () => void;
 }
 
-const Sidebar: FunctionComponent<Props> = ({ className, children }) => {
+const Sidebar: FunctionComponent<Props> = ({
+  className,
+  children,
+  closeSidebar,
+}) => {
   const rootClassName = cn(s.root, className);
   return (
     <div className={rootClassName}>
-      <div className="fixed inset-0 overflow-hidden shadow-sm bg-black bg-opacity-25">
+      <div
+        className="fixed inset-0 overflow-hidden shadow-sm bg-black bg-opacity-25"
+        onClick={closeSidebar}
+      >
         <div className="absolute inset-0 overflow-hidden">
           <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 ">
             <div className="w-screen max-w-2xl">

components/ui/index.ts

@@ -2,3 +2,4 @@ export { default as Button } from "./Button";
 export { default as Container } from "./Container";
 export { default as Sidebar } from "./Sidebar";
 export { default as Logo } from "./Logo";
+export { default as ClickOutside } from "./ClickOutside";