From ca27501b7952623b726b8aefd85587fae5677bf3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Geonizeli?= <joao.geonizeli@gmail.com>
Date: Fri, 13 Aug 2021 11:20:18 -0300
Subject: [PATCH] improve sidebar and navbar

---
 .../src/components/Navbar/Navbar.tsx          |  2 +-
 app/javascript/src/components/SideNav.tsx     | 41 ++++++++-----------
 2 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/app/javascript/src/components/Navbar/Navbar.tsx b/app/javascript/src/components/Navbar/Navbar.tsx
index f45deca..c22e88e 100644
--- a/app/javascript/src/components/Navbar/Navbar.tsx
+++ b/app/javascript/src/components/Navbar/Navbar.tsx
@@ -23,7 +23,7 @@ export const Navbar = () => {
   return (
     <nav className="w-full h-16 flex bg-white shadow items-center px-4 space-x-2 z-50">
       <button
-        className="w-10 h-10 xl:hidden"
+        className="w-12 md:w-10 h-12 md:h-10 xl:hidden fixed md:relative bottom-8 md:bottom-auto right-8 md:right-auto bg-white rounded-full p-3 md:p-0 shadow md:shadow-none"
         onClick={() => handleExpandSideNav()}
       >
         <svg
diff --git a/app/javascript/src/components/SideNav.tsx b/app/javascript/src/components/SideNav.tsx
index 8068009..2cfc4b9 100644
--- a/app/javascript/src/components/SideNav.tsx
+++ b/app/javascript/src/components/SideNav.tsx
@@ -48,33 +48,28 @@ export const SideNav = () => {
         <div
           role="none"
           onKeyPress={handleKeyPress}
-          onClick={() => handleCloseSideNav()}
+          onClick={handleCloseSideNav}
           className="xl:hidden absolute w-full h-full bg-black bg-opacity-60"
         />
       </Transition>
-
-      <Transition
-        className="z-40"
-        show={sideNavExpanded || window.screen.width >= 1280}
-        enter="transition-opacity duration-500"
-        enterFrom="opacity-0"
-        enterTo="opacity-100"
-        leave="transition-opacity duration-500"
-        leaveFrom="opacity-100"
-        leaveTo="opacity-0"
+      <aside
+        className={`bg-white w-4/6 md:w-1/6 overflow-hidden absolute h-screen drop-shadow-xl drop border-r border-gray-200 z-40 transition-all duration-500 xl:transition-none xl:mx-0 xl:static ${
+          sideNavExpanded ? "mx-0" : "-mx-full"
+        }`}
       >
-        <aside className="bg-white w-5/6 md:w-2/6 overflow-hidden absolute xl:static h-full drop-shadow-xl drop border-r border-gray-200 z-40 xl:transition-none xl:mx-0 xl:w-64 mx-0">
-          <ul>
-            {MenuItems.map((item) => (
-              <Link to={item.path} key={item.label} role="menuitem">
-                <li className="text-xl p-4 px-8 hover:bg-gray-100 cursor-pointer">
-                  {item.label}
-                </li>
-              </Link>
-            ))}
-          </ul>
-        </aside>
-      </Transition>
+        <ul>
+          {MenuItems.map((item) => (
+            <Link to={item.path} key={item.label}>
+              <li
+                key={item.label}
+                className="text-xl p-4 px-8 hover:bg-gray-100 cursor-pointer"
+              >
+                {item.label}
+              </li>
+            </Link>
+          ))}
+        </ul>
+      </aside>
     </>
   );
 };