From 1d7ca252d4f77fff0ef7d33bc8fe220b0e1404d4 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Tue, 30 May 2023 20:06:09 +0200
Subject: [PATCH] Updated the Sidebar.jsx

---
 .../src/common/components/Sidebar/Sidebar.jsx | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/client/src/common/components/Sidebar/Sidebar.jsx b/client/src/common/components/Sidebar/Sidebar.jsx
index d6184c0..e5f86da 100644
--- a/client/src/common/components/Sidebar/Sidebar.jsx
+++ b/client/src/common/components/Sidebar/Sidebar.jsx
@@ -2,11 +2,19 @@ import SidebarHeader from "@/common/components/Sidebar/components/SidebarHeader"
 import "./styles.sass";
 import SidebarContent from "@/common/components/Sidebar/components/SidebarContent";
 import SidebarFooter from "@/common/components/Sidebar/components/SidebarFooter";
+import {useRef} from "react";
 
-export const Sidebar = ({open, setOpen}) => (
-    <aside className={open ? "" : "sidebar-hidden"}>
-        <SidebarHeader setOpen={setOpen}/>
-        <SidebarContent />
-        <SidebarFooter />
-    </aside>
-)
\ No newline at end of file
+export const Sidebar = ({open, setOpen}) => {
+    const ref = useRef();
+
+    return (
+        <>
+            {open && <div className="background-overlay" ref={ref} onClick={() => setOpen(false)}/>}
+            <aside className={open ? "" : "sidebar-hidden"} ref={ref}>
+                <SidebarHeader setOpen={setOpen}/>
+                <SidebarContent/>
+                <SidebarFooter/>
+            </aside>
+        </>
+    );
+}
\ No newline at end of file