From 17027e299bb9bf958aebaf735c40e7664ad71e8b Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Tue, 2 Jan 2024 16:28:18 +0330
Subject: [PATCH] feat: add animation to menu box

---
 src/components/menu/menu.tsx | 42 ++++++++++++++++++++++--------------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
index 11b2b57..8f8b607 100644
--- a/src/components/menu/menu.tsx
+++ b/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
-          className={styles.menuButton}
-          onClick={() => setIsOpen(prev => !prev)}
-        >
-          {isOpen ? <IoClose /> : <IoMenu />}
-        </button>
-      </Tooltip>
+      <button
+        aria-label="Menu"
+        className={styles.menuButton}
+        onClick={() => setIsOpen(prev => !prev)}
+      >
+        {isOpen ? <IoClose /> : <IoMenu />}
+      </button>
 
-      {isOpen && (
-        <div className={styles.menu}>
-          <button className={styles.menuItem} onClick={shuffle}>
-            Shuffle Sounds
-          </button>
-        </div>
-      )}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            animate="show"
+            className={styles.menu}
+            exit="hidden"
+            initial="hidden"
+            variants={variants}
+          >
+            <button className={styles.menuItem} onClick={shuffle}>
+              Shuffle Sounds
+            </button>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }