Add ease-in on the guest elements

Author: kamranahmedse

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);
     }
   });
 }

src/components/Navigation/Navigation.astro

@@ -28,15 +28,15 @@ 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>
         <AccountDropdown />
 
         <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>