feat: add animation to menu box

This commit is contained in:
MAZE 2024-01-02 16:28:18 +03:30
parent 184bb09f5a
commit 17027e299b

View File

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