From d5aa3b548cea284bdbe381da2d90da2e7b23471c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Geonizeli?= <joao.geonizeli@gmail.com>
Date: Thu, 12 Aug 2021 18:20:05 -0300
Subject: [PATCH] fix sidebar on desktop

---
 app/javascript/src/components/SideNav.tsx | 29 ++++++++++++-----------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/app/javascript/src/components/SideNav.tsx b/app/javascript/src/components/SideNav.tsx
index 68917e9..8068009 100644
--- a/app/javascript/src/components/SideNav.tsx
+++ b/app/javascript/src/components/SideNav.tsx
@@ -37,32 +37,33 @@ export const SideNav = () => {
     <>
       <Transition
         show={sideNavExpanded}
-        enter="transition-opacity duration-500 z-30"
-        enterFrom="opacity-0 z-30"
-        enterTo="opacity-100 z-30"
-        leave="transition-opacity duration-500 z-30"
-        leaveFrom="opacity-100 z-30"
-        leaveTo="opacity-0 z-30"
+        className="z-30"
+        enter="transition-opacity duration-500"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition-opacity duration-500"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
       >
         <div
           role="none"
           onKeyPress={handleKeyPress}
           onClick={() => handleCloseSideNav()}
-          className="xl:hidden absolute w-full h-full bg-black bg-opacity-60 z-30"
+          className="xl:hidden absolute w-full h-full bg-black bg-opacity-60"
         />
       </Transition>
 
       <Transition
-        className="h-full"
-        show={sideNavExpanded || window.screenY >= 1280}
-        enter="transition-opacity duration-500 z-40"
-        enterFrom="opacity-0 z-40"
-        enterTo="opacity-100 z-40"
-        leave="transition-opacity duration-500 z-40"
+        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-5/6 md:w-2/6 overflow-hidden absolute h-full drop-shadow-xl drop border-r border-gray-200 z-40 xl:transition-none xl:mx-0 xl:static xl:w-full mx-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>
             {MenuItems.map((item) => (
               <Link to={item.path} key={item.label} role="menuitem">