feat: add animation to menu box

src/components/menu/menu.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react';
 import { IoMenu, IoClose } from 'react-icons/io5/index';
+import { AnimatePresence, motion } from 'framer-motion';
 
-import { Tooltip } from '@/components/tooltip';
 import { useSoundStore } from '@/store';
+import { slideY, fade, mix } from '@/lib/motion';
 
 import styles from './menu.module.css';
 
@@ -11,24 +12,33 @@ export function Menu() {
 
   const shuffle = useSoundStore(state => state.shuffle);
 
+  const variants = mix(slideY(-20), fade());
+
   return (
     <div className={styles.wrapper}>
-      <Tooltip content="Menu" hideDelay={0} showDelay={0}>
+      <button
-        <button
+        aria-label="Menu"
-          className={styles.menuButton}
+        className={styles.menuButton}
-          onClick={() => setIsOpen(prev => !prev)}
+        onClick={() => setIsOpen(prev => !prev)}
-        >
+      >
-          {isOpen ? <IoClose /> : <IoMenu />}
+        {isOpen ? <IoClose /> : <IoMenu />}
-        </button>
+      </button>
-      </Tooltip>
 
-      {isOpen && (
+      <AnimatePresence>
-        <div className={styles.menu}>
+        {isOpen && (
-          <button className={styles.menuItem} onClick={shuffle}>
+          <motion.div
-            Shuffle Sounds
+            animate="show"
-          </button>
+            className={styles.menu}
-        </div>
+            exit="hidden"
-      )}
+            initial="hidden"
+            variants={variants}
+          >
+            <button className={styles.menuItem} onClick={shuffle}>
+              Shuffle Sounds
+            </button>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }