Created
November 18, 2021 07:32
-
-
Save lnikell/eb2a276974890be03514ca4000cf6e36 to your computer and use it in GitHub Desktop.
Burger
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import clsx from 'clsx'; | |
import { motion } from 'framer-motion'; | |
import PropTypes from 'prop-types'; | |
import React from 'react'; | |
const ANIMATION_DURATION = 0.2; | |
const Burger = ({ className: additionalClassName, onClick, isToggled }) => ( | |
<motion.button | |
className={clsx('relative w-10 h-10 border-2 border-white rounded-full', additionalClassName)} | |
type="button" | |
animate={isToggled ? 'toggled' : 'initial'} | |
onClick={onClick} | |
> | |
<motion.span | |
className="absolute top-[11px] left-[8px] block w-5 h-0.5 bg-white rounded-full" | |
variants={{ | |
initial: { | |
top: 11, | |
display: 'block', | |
transition: { duration: ANIMATION_DURATION, delay: ANIMATION_DURATION }, | |
}, | |
toggled: { | |
top: 17, | |
transition: { duration: ANIMATION_DURATION }, | |
transitionEnd: { display: 'none' }, | |
}, | |
}} | |
/> | |
<motion.span | |
className="absolute top-[17px] left-[12px] block w-3 h-0.5 bg-white rounded-full" | |
variants={{ | |
initial: { | |
display: 'block', | |
transition: { delay: ANIMATION_DURATION }, | |
}, | |
toggled: { | |
display: 'none', | |
transition: { delay: ANIMATION_DURATION }, | |
}, | |
}} | |
/> | |
<motion.span | |
className="absolute bottom-[11px] left-[8px] block w-5 h-0.5 bg-white rounded-full" | |
variants={{ | |
initial: { | |
bottom: 11, | |
display: 'block', | |
transition: { duration: ANIMATION_DURATION, delay: ANIMATION_DURATION }, | |
}, | |
toggled: { | |
bottom: 17, | |
transition: { duration: ANIMATION_DURATION }, | |
transitionEnd: { display: 'none' }, | |
}, | |
}} | |
/> | |
<motion.span | |
className="absolute top-[17px] left-[8px] hidden w-5 h-0.5 bg-white rounded-full" | |
variants={{ | |
initial: { | |
rotate: '0deg', | |
transition: { duration: ANIMATION_DURATION }, | |
transitionEnd: { display: 'none' }, | |
}, | |
toggled: { | |
display: 'block', | |
rotate: '45deg', | |
transition: { duration: ANIMATION_DURATION, delay: ANIMATION_DURATION }, | |
}, | |
}} | |
/> | |
<motion.span | |
className="absolute top-[17px] left-[8px] hidden w-5 h-0.5 bg-white rounded-full" | |
variants={{ | |
initial: { | |
rotate: '0deg', | |
transition: { duration: ANIMATION_DURATION }, | |
transitionEnd: { display: 'none' }, | |
}, | |
toggled: { | |
display: 'block', | |
rotate: '-45deg', | |
transition: { duration: ANIMATION_DURATION, delay: ANIMATION_DURATION }, | |
}, | |
}} | |
/> | |
</motion.button> | |
); | |
Burger.propTypes = { | |
className: PropTypes.string, | |
isToggled: PropTypes.bool, | |
onClick: PropTypes.func, | |
}; | |
Burger.defaultProps = { | |
className: null, | |
isToggled: false, | |
onClick: null, | |
}; | |
export default Burger; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment