From 291e2d985258db89b2084ebc5ec58268d0bfa435 Mon Sep 17 00:00:00 2001
From: Awesh Choudhary <66569398+aweshchoudhary@users.noreply.github.com>
Date: Sat, 25 Mar 2023 17:42:06 +0530
Subject: [PATCH] Added Better Closing Sidebar Logic (Close on Background
 Click) (#122)

---
 components/Sidebar/Sidebar.tsx | 2 +-
 pages/index.tsx                | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/Sidebar/Sidebar.tsx b/components/Sidebar/Sidebar.tsx
index cbeffae..184ea9a 100644
--- a/components/Sidebar/Sidebar.tsx
+++ b/components/Sidebar/Sidebar.tsx
@@ -77,7 +77,7 @@ export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selected
   }, [searchTerm, conversations]);
 
   return (
-    <aside className={`h-full flex flex-none space-y-2 p-2 flex-col bg-[#202123] w-[260px] z-10 sm:relative sm:top-0 absolute top-12 bottom-0`}>
+    <aside className={`h-full transition-all flex flex-none space-y-2 p-2 flex-col bg-[#202123] w-[260px] z-50 sm:relative sm:top-0 fixed top-0 bottom-0`}>
       <header className="flex items-center">
         <button
           className="flex gap-3 p-3 items-center w-[190px] rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm flex-shrink-0 border border-white/20"
diff --git a/pages/index.tsx b/pages/index.tsx
index fe52bf1..0586fcd 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -479,7 +479,7 @@ export default function Home() {
 
           <article className="flex h-full w-full pt-[48px] sm:pt-0">
             {showSidebar ? (
-              <>
+              <div>
                 <Sidebar
                   loading={messageIsStreaming}
                   conversations={conversations}
@@ -503,10 +503,12 @@ export default function Home() {
                 />
 
                 <IconArrowBarLeft
-                  className="fixed top-2.5 left-4 sm:top-1 sm:left-4 sm:text-neutral-700 dark:text-white cursor-pointer hover:text-gray-400 dark:hover:text-gray-300 h-7 w-7 sm:h-8 sm:w-8 sm:hidden"
+                  className="z-50 fixed top-5 left-[270px] sm:top-1 sm:left-4 sm:text-neutral-700 dark:text-white cursor-pointer hover:text-gray-400 dark:hover:text-gray-300 h-7 w-7 sm:h-8 sm:w-8 sm:hidden"
                   onClick={() => setShowSidebar(!showSidebar)}
                 />
-              </>
+                {/* Sidebar Background for closing on click outside of it. */}
+                <div onClick={() => setShowSidebar(!showSidebar)} className="sm:hidden bg-black opacity-70 z-10 absolute top-0 left-0 h-full w-full"></div>
+              </div>
             ) : (
               <IconArrowBarRight
                 className="fixed text-white z-50 top-2.5 left-4 sm:top-1.5 sm:left-4 sm:text-neutral-700 dark:text-white cursor-pointer hover:text-gray-400 dark:hover:text-gray-300 h-7 w-7 sm:h-8 sm:w-8"