Automatically hide the sidebar when clicking outside

compendium-frontend/src/components/SideBar.tsx

-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 // import { sidebarContext } from "../helpers/SidebarProvider";
 import { AiOutlineClose, AiOutlinePlus } from 'react-icons/ai';
 
@@ -7,6 +7,8 @@ interface Props {
     children: React.ReactNode;
 }
 
+// check if click outside of sidebar, then toggle it
+
 const Sidebar: React.FC<Props> = ({ children }) => {
 
     const [show, setShow] = useState<boolean>(false);
@@ -15,6 +17,21 @@ const Sidebar: React.FC<Props> = ({ children }) => {
         setShow(!show);
     };
 
+    const clickOutside = (e) => {
+        // check if the click was inside the sidebar or the menu button
+        // if it was outside, close the sidebar
+        if (e.target.closest('#sidebar') || e.target.closest('.toggle-btn')) {
+            return;
+        }
+        setShow(false);
+    }
+    useEffect(() => {
+        document.addEventListener('click', clickOutside);
+        return () => {
+            document.removeEventListener('click', clickOutside);
+        }
+    });
+
     return (
         <div className="sidebar-wrapper">
             <nav className={show ? '' : 'no-sidebar'} id="sidebar">