From ec45a565eaf53c934698a9a1de4482918a83d70a Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 9 Apr 2023 19:51:33 +0100
Subject: [PATCH] Add ease-in on the guest elements

---
 src/components/Authenticator/authenticator.ts | 12 ++++++++++--
 src/components/Navigation/Navigation.astro    |  8 ++++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/Authenticator/authenticator.ts b/src/components/Authenticator/authenticator.ts
index db7cca139..c118265a3 100644
--- a/src/components/Authenticator/authenticator.ts
+++ b/src/components/Authenticator/authenticator.ts
@@ -1,12 +1,20 @@
 import Cookies from 'js-cookie';
 import { TOKEN_COOKIE_NAME } from '../../lib/constants';
 
+function easeInElement(el: Element) {
+  el.classList.add('opacity-0', 'transition-opacity', 'duration-300');
+  el.classList.remove('hidden');
+  setTimeout(() => {
+    el.classList.remove('opacity-0');
+  });
+}
+
 function showHideAuthElements(hideOrShow: 'hide' | 'show' = 'hide') {
   document.querySelectorAll('[data-auth-required]').forEach((el) => {
     if (hideOrShow === 'hide') {
       el.classList.add('hidden');
     } else {
-      el.classList.remove('hidden');
+      easeInElement(el);
     }
   });
 }
@@ -16,7 +24,7 @@ function showHideGuestElements(hideOrShow: 'hide' | 'show' = 'hide') {
     if (hideOrShow === 'hide') {
       el.classList.add('hidden');
     } else {
-      el.classList.remove('hidden');
+      easeInElement(el);
     }
   });
 }
diff --git a/src/components/Navigation/Navigation.astro b/src/components/Navigation/Navigation.astro
index c9e03ca26..1a835ddfb 100644
--- a/src/components/Navigation/Navigation.astro
+++ b/src/components/Navigation/Navigation.astro
@@ -28,7 +28,7 @@ import AccountDropdown from './AccountDropdown.astro';
       </li>
     </ul>
     <ul class='hidden w-[172px] h-8 items-center gap-5 sm:flex justify-end'>
-      <li data-guest-required>
+      <li data-guest-required class="hidden">
         <a href='/login' class='text-gray-400 hover:text-white'>Login</a>
       </li>
       <li>
@@ -36,7 +36,7 @@ import AccountDropdown from './AccountDropdown.astro';
 
         <a
           data-guest-required
-          class='w-28 flex h-8 cursor-pointer items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-700 px-4 py-2 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600'
+          class='hidden w-28 flex h-8 cursor-pointer items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-700 px-4 py-2 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600'
           href='/signup'
         >
           <span>Sign Up</span>
@@ -116,7 +116,7 @@ import AccountDropdown from './AccountDropdown.astro';
           <a
             data-guest-required
             href='/signup'
-            class='text-xl text-white md:text-lg'
+            class='text-xl text-white md:text-lg hidden'
           >
             Login
           </a>
@@ -125,7 +125,7 @@ import AccountDropdown from './AccountDropdown.astro';
           <a
             data-guest-required
             href='/signup'
-            class='text-xl text-green-300 hover:text-green-400 md:text-lg'
+            class='text-xl text-green-300 hover:text-green-400 md:text-lg hidden'
           >
             Sign Up
           </a>