fix: improve open navbar ux

Add empty clickable div underneath the sidebar to fire the toggle function that closes the sidebar. fixes issue #283
Planet-NULLCAST · Oct 26, 2021 · bf7aa2c · bf7aa2c
1 parent d1ecd4e
commit bf7aa2c
Showing 1 changed file with 43 additions and 33 deletions.
diff --git a/component/layout/SideBar/SideBar.jsx b/component/layout/SideBar/SideBar.jsx
@@ -29,39 +29,49 @@ export default function SideBar({ onToggle, toggle, course }) {
   }
 
   return (
-    <aside
-      className={`transform top-0 ${
-        toggle ? "left-0" : "-left-64"
-      } w-64 bg-white border-r fixed ease-in-out h-full transition-all delay-200 duration-500 z-50 translate-x-0 `}
-    >
-      <img
-        className="h-5 w-5 absolute top-5 right-6 cursor-pointer close-icon"
-        src="/images/close.svg"
-        onClick={handleClick}
-      />
-
-      <ul
-        className="text-gray-900 flex flex-col my-14 overflow-auto"
-        style={{ height: "86%" }}
+    <>
+      <aside
+        className={`transform top-0 ${
+          toggle ? "left-0" : "-left-64"
+        } w-64 bg-white border-r fixed ease-in-out h-full transition-all delay-200 duration-500 z-50 translate-x-0 `}
       >
-        {titles.map((title) => (
-          <li
-            key={title.chapterId}
-            className={`flex flex-row justify-between items-center text-center text-gray-700 border-l-4 border-gray-700 hover:border-purple-700 hover:text-purple-700 hover:bg-gray-100 p-4`}
-          >
-            <Link href={`/curriculum/${course.courseUrl}/${title.chapterUrl}`}>
-              <a onClick={handleClick}>{title.chapterName}</a>
-            </Link>
-            {chapters?.includes(title.chapterUrl) && (
-              <img
-                src="/images/checkmark.svg"
-                alt="check mark progress"
-                className="h-4 w-4 mr-2"
-              />
-            )}
-          </li>
-        ))}
-      </ul>
-    </aside>
+        <img
+          className="h-5 w-5 absolute top-5 right-6 cursor-pointer close-icon"
+          src="/images/close.svg"
+          onClick={handleClick}
+        />
+
+        <ul
+          className="text-gray-900 flex flex-col my-14 overflow-auto"
+          style={{ height: "86%" }}
+        >
+          {titles.map((title) => (
+            <li
+              key={title.chapterId}
+              className={`flex flex-row justify-between items-center text-center text-gray-700 border-l-4 border-gray-700 hover:border-purple-700 hover:text-purple-700 hover:bg-gray-100 p-4`}
+            >
+              <Link
+                href={`/curriculum/${course.courseUrl}/${title.chapterUrl}`}
+              >
+                <a onClick={handleClick}>{title.chapterName}</a>
+              </Link>
+              {chapters?.includes(title.chapterUrl) && (
+                <img
+                  src="/images/checkmark.svg"
+                  alt="check mark progress"
+                  className="h-4 w-4 mr-2"
+                />
+              )}
+            </li>
+          ))}
+        </ul>
+      </aside>
+      {toggle && (
+        <div
+          onClick={handleClick}
+          className="absolute h-100 w-100 left-0 right-0 top-0 bottom-0 z-40 cursor-pointer"
+        />
+      )}
+    </>
   );
 }