improve sidebar and navbar

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

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>
-
+      <aside
-      <Transition
+        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 ${
-        className="z-40"
+          sideNavExpanded ? "mx-0" : "-mx-full"
-        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-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>
-          <ul>
+          {MenuItems.map((item) => (
-            {MenuItems.map((item) => (
+            <Link to={item.path} key={item.label}>
-              <Link to={item.path} key={item.label} role="menuitem">
+              <li
-                <li className="text-xl p-4 px-8 hover:bg-gray-100 cursor-pointer">
+                key={item.label}
-                  {item.label}
+                className="text-xl p-4 px-8 hover:bg-gray-100 cursor-pointer"
-                </li>
+              >
-              </Link>
+                {item.label}
-            ))}
+              </li>
-          </ul>
+            </Link>
-        </aside>
+          ))}
-      </Transition>
+        </ul>
+      </aside>
     </>
   );
 };