Usernav to be reused

components/core/Layout/Layout.tsx

@@ -13,7 +13,7 @@ interface Props {
 
 const Layout: FunctionComponent<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className);
-  const { displaySidebar } = useUI();
+  const { displaySidebar, closeSidebar } = useUI();
   return (
     <div className={rootClassName}>
       <Featurebar
@@ -25,7 +25,7 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
         <main className="h-screen">{children}</main>
       </Container>
       {displaySidebar && (
-        <Sidebar>
+        <Sidebar closeSidebar={closeSidebar}>
           <CartSidebarView />
         </Sidebar>
       )}

components/core/UserNav/UserNav.module.css

@@ -6,5 +6,5 @@
 }
 
 .item {
-  @apply mr-6 cursor-pointer;
+  @apply mr-6 cursor-pointer relative;
 }

components/core/UserNav/UserNav.tsx

@@ -16,8 +16,11 @@ const UserNav: FunctionComponent<Props> = ({ className }) => {
   return (
     <nav className={rootClassName}>
       <ul className={s.list}>
-        <li className={s.item}>
-          <Bag onClick={openSidebar} />
+        <li className={s.item} onClick={openSidebar}>
+          <Bag />
+          <span className="bg-black h-4 w-4 absolute rounded-full inset-3 text-white flex items-center justify-center font-bold text-xs">
+            1
+          </span>
         </li>
         <li className={s.item}>
           <Heart />

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";