Changes mobile menu animation to be consistent with cart animation. (#1015)

components/layout/navbar/mobile-menu.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Dialog } from '@headlessui/react';
-import { motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -42,19 +42,37 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
       >
         <MenuIcon className="h-6" />
       </button>
+      <AnimatePresence initial={false}>
+        {mobileMenuIsOpen && (
           <Dialog
+            as={motion.div}
+            initial="closed"
+            animate="open"
+            exit="closed"
+            key="dialog"
+            static
             open={mobileMenuIsOpen}
             onClose={() => {
               setMobileMenuIsOpen(false);
             }}
             className="relative z-50"
           >
+            <motion.div
+              variants={{
+                open: { opacity: 1, backdropFilter: 'blur(0.5px)' },
+                closed: { opacity: 0, backdropFilter: 'blur(0px)' }
+              }}
+              className="fixed inset-0 bg-black/30"
+              aria-hidden="true"
+            />
             <div className="fixed inset-0 flex justify-end" data-testid="mobile-menu">
               <Dialog.Panel
                 as={motion.div}
                 variants={{
-              open: { opacity: 1 }
+                  open: { translateX: 0 },
+                  closed: { translateX: '-100%' }
                 }}
+                transition={{ type: 'spring', bounce: 0, duration: 0.3 }}
                 className="flex w-full flex-col bg-white pb-6 dark:bg-black"
               >
                 <div className="p-4">
@@ -93,6 +111,8 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
               </Dialog.Panel>
             </div>
           </Dialog>
+        )}
+      </AnimatePresence>
     </>
   );
 }