Added transition to the sidebar

styles/ReadyOrNot.module.css

@@ -174,15 +174,16 @@
 
 .sidebarList {
   overflow-y: scroll;
+  overflow-x: hidden;
   scrollbar-width: none;
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding: 2rem;
   flex-wrap: nowrap;
   justify-content: flex-start;
   align-items: flex-start;
   background-color: var(--background_grey_opaque);
+  padding: 2rem;
 }
 
 .sidebar::-webkit-scrollbar {
@@ -190,15 +191,28 @@
   background: transparent;
 }
 
+.sl_wrapper {
+  height: 100%;
+  overflow: hidden;
+  transition-property: width, visibility;
+  transition-timing-function: ease-in-out, linear;
+  transition-duration: 0.3s, 0s;
+}
+
 .sl_active  {
-  display: flex;
+  visibility: visible;
+  width: 97%;
+  transition-delay: 0s, 0s;
 }
 
 .sl_inactive {
-  display: none;
+  visibility: hidden;
+  width: 0;
+  transition-delay: 0s, 0.3s;
 }
 
 .navElem {
+  white-space:nowrap;
   font-size: 14pt;
   width: auto;
   border-radius: 5px;