fix: janky navigation animation

src/_assets/js/main.js

@@ -1,7 +1,6 @@
 import Alpine from 'alpinejs';
 import coreNav from './alpine/navigation.js';
 
-
 window.Alpine = Alpine;
 Alpine.data('coreNav', coreNav)
 Alpine.start();

src/_includes/blocks/header.njk

@@ -28,8 +28,6 @@
     </a>
   </div>
 
-
-
   <div
     class="bg-white/75 fixed z-10 inset-0"
     x-show="navOpen"
@@ -39,15 +37,15 @@
   </div>
 
   <div
-    class="sm:ml-16 max-w-[90%] fixed z-20 top-0 bottom-0 transition-transform"
+    class="sm:ml-16 w-full sm:max-w-xs max-w-[90%] fixed z-20 top-0 bottom-0 transition-all"
     x-show="navOpen"
     x-cloak
-    x-transition:enter="transition duration-300 -translate-x-32"
-    x-transition:enter-start="opacity-0"
+    x-transition:enter="transition ease-in-out duration-300"
+    x-transition:enter-start="opacity-0 -translate-x-full"
     x-transition:enter-end="opacity-100 -translate-x-0"
     x-transition:leave="transition ease-in duration-300"
     x-transition:leave-start="opacity-100"
-    x-transition:leave-end="opacity-0 -translate-x-32"
+    x-transition:leave-end="opacity-0 -translate-x-full"
   >
     <div class="h-full w-full sm:max-w-xs flex flex-col justify-between bg-blue sm:border-l border-l-white text-white">
       <nav class="mt-10 flex flex-col gap-8 uppercase p-4 sm:mt-2" role="navigation">