Merge branch 'feature/sidebar-transition' into 'main'

Added transition to the sidebar

See merge request neshura-websites/readyornot!5

components/sidebar.tsx

@@ -47,13 +47,15 @@ const Sidebar = () => {
     return (
       <>
         <div className={styles.sidebar} onClick={() => setActive(!active)}>
-          <nav className={[styles.sidebarList, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
+          <div className={[styles.sl_wrapper, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
+            <nav className={styles.sidebarList}>
               {maps.map((item) => (
                 <Link key={item.name} href={item.href}>
                   <a className={[styles.navElem, (router.query.map == item.href ? styles.ne_active : styles.ne_inactive)].join(" ")} onClick={stopPropagation}>{item.name}</a>
                 </Link>
               ))}
             </nav>
+          </div>
           <div className={styles.sidebarArrow}>
             <Image src={active ? "/sidebar_arrow_flipped.webp" : "/sidebar_arrow.webp"} width={32} height={96} alt={active ? ">" : "<"} />
           </div>

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;