mirror of
https://github.com/remvze/moodist.git
synced 2025-09-29 15:30:49 -04:00
feat: add animation to menu box
This commit is contained in:
parent
184bb09f5a
commit
17027e299b
@ -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>
|
||||
);
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user