From dd19323280841a2180f829c0a6764759e7acb58f Mon Sep 17 00:00:00 2001
From: Anirudh <70373803+techwithanirudh@users.noreply.github.com>
Date: Sat, 15 Jul 2023 17:56:18 +0530
Subject: [PATCH] Animated sidebar (#649)

* Initial Commit

* Add transition
---
 client/src/components/Nav/index.jsx | 22 +++++++++++++++-------
 client/src/mobile.css               | 16 +++++++++++++---
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Nav/index.jsx b/client/src/components/Nav/index.jsx
index b0800f7ffb..3a81b3b560 100644
--- a/client/src/components/Nav/index.jsx
+++ b/client/src/components/Nav/index.jsx
@@ -175,23 +175,31 @@ export default function Nav({ navVisible, setNavVisible }) {
 
   return (
     <>
-      <div className={'nav dark bg-gray-900 md:inset-y-0' + (navVisible ? ' active' : '')}>
+      <div
+        className={
+          'nav dark bg-gray-900 transition-all duration-500 md:inset-y-0' +
+          (navVisible ? ' active' : '')
+        }
+      >
         <div className="flex h-full min-h-0 flex-col ">
           <div className="scrollbar-trigger relative flex h-full w-full flex-1 items-start border-white/20">
             <nav className="relative flex h-full flex-1 flex-col space-y-1 p-2">
-              <div className='flex flex-row h-11 mb-2'>
+              <div className="mb-2 flex h-11 flex-row">
                 <NewChat />
                 <button
-                  type='button'
-                  className={cn('nav-close-button inline-flex h-11 w-11 border border-white/20 items-center justify-center rounded-md text-white hover:bg-gray-500/10')}
+                  type="button"
+                  className={cn(
+                    'nav-close-button inline-flex h-11 w-11 items-center justify-center rounded-md border border-white/20 text-white hover:bg-gray-500/10',
+                  )}
                   onClick={toggleNavVisible}
                 >
-                  <span className='sr-only'>Close sidebar</span>
+                  <span className="sr-only">Close sidebar</span>
                   <Panel open={false} />
                 </button>
               </div>
               <div
-                className={`flex-1 flex-col overflow-y-auto ${isHovering ? '' : 'scrollbar-transparent'
+                className={`flex-1 flex-col overflow-y-auto ${
+                  isHovering ? '' : 'scrollbar-transparent'
                 } border-b border-white/20`}
                 onMouseEnter={() => setIsHovering(true)}
                 onMouseLeave={() => setIsHovering(false)}
@@ -223,7 +231,7 @@ export default function Nav({ navVisible, setNavVisible }) {
       {!navVisible && (
         <button
           type="button"
-          className="nav-open-button mt-1 fixed left-2 top-0.5 z-10 flex p-3 items-center gap-3 transition-colors duration-200 cursor-pointer text-sm rounded-md border bg-white dark:bg-gray-800 border-black/10 dark:border-white/20 hover:bg-gray-50 dark:hover:bg-gray-700 h-11 w-11 text-gray-900"
+          className="nav-open-button fixed left-2 top-0.5 z-10 mt-1 flex h-11 w-11 cursor-pointer items-center gap-3 rounded-md border border-black/10 bg-white p-3 text-sm text-gray-900 transition-colors duration-200 hover:bg-gray-50 dark:border-white/20 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700"
           onClick={toggleNavVisible}
         >
           <div className="flex items-center justify-center">
diff --git a/client/src/mobile.css b/client/src/mobile.css
index 34f5bb5250..305c7c2bf0 100644
--- a/client/src/mobile.css
+++ b/client/src/mobile.css
@@ -27,10 +27,20 @@
 
 .nav.active {
   position: relative;
+  animation: nav-open 1000ms ease-in-out forwards;
   left: 0;
   opacity: 1;
 }
 
+@keyframes nav-open {
+  0% {
+    width: 0%;
+  }
+  100%{
+    width: 100%;
+  }
+}
+
 .nav-mask.active {
   opacity: 1;
   pointer-events: auto;
@@ -38,9 +48,9 @@
 
 @media (max-width: 767px) {
   .nav {
-    width: calc(100% - 60px)  ;
-    transition: all 0.5s;
+    width: calc(100% - 60px);
   }
+  
   .nav-mask {
     position: fixed;
     z-index: 35;
@@ -52,7 +62,6 @@
     padding-left: 420px;
     padding-top: 12px;
     opacity: 0;
-    transition: all 0.5s;
     pointer-events: none;
   }
 
@@ -63,6 +72,7 @@
 
   .nav.active {
     position: fixed;
+    animation: none;
   }
 }