From 8393454f8add34b184990921f87e71aba32b11e1 Mon Sep 17 00:00:00 2001
From: Outrun Colors <itsoutruncolors@gmail.com>
Date: Sat, 24 Sep 2022 22:21:36 -0500
Subject: [PATCH] Allow heading to close drawer

---
 chat/package.json                      |  2 +-
 chat/src/features/chat/ChatHeading.tsx | 35 +++++++++++++++++---------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/chat/package.json b/chat/package.json
index c3ce06e903..4df129f8c3 100644
--- a/chat/package.json
+++ b/chat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chat",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "main": "./src/index.tsx",
   "license": "MIT",
   "dependencies": {
diff --git a/chat/src/features/chat/ChatHeading.tsx b/chat/src/features/chat/ChatHeading.tsx
index c3760d205f..07205d141d 100644
--- a/chat/src/features/chat/ChatHeading.tsx
+++ b/chat/src/features/chat/ChatHeading.tsx
@@ -4,27 +4,38 @@ import { UserList } from "./UserList";
 import "./ChatHeading.css";
 
 export function ChatHeading() {
-  const { reveal } = useDrawer();
+  const { open, hide, reveal } = useDrawer();
   const { online } = useChat();
-  const handleOpenUserListDrawer = useCallback(
-    () =>
+  const handleToggleUserListDrawer = useCallback(() => {
+    if (open) {
+      hide();
+    } else {
       reveal({
         title: "Users in chat",
         content: <UserList fluid={true} />,
-      }),
-    []
-  );
+      });
+    }
+  }, [open]);
 
   return (
     <div className="ChatHeading">
       <div />
       <div>
-        <i
-          role="button"
-          className="far fa-user"
-          onClick={handleOpenUserListDrawer}
-        />
-        <em>{online.length} users online</em>
+        {open ? (
+          <button
+            className="btn btn-secondary"
+            onClick={handleToggleUserListDrawer}
+          >Close</button>
+        ) : (
+          <>
+            <i
+              role="button"
+              className="far fa-user"
+              onClick={handleToggleUserListDrawer}
+            />
+            <em>{online.length} users online</em>
+          </>
+        )}
       </div>
     </div>
   );