Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | import {Fixed} from '@primer/components'
import {AnimatePresence, motion} from 'framer-motion'
import React from 'react'
import {FocusOn} from 'react-focus-on'
function Drawer({isOpen, onDismiss, children}) {
return (
<AnimatePresence>
{isOpen ? (
<div
// These event handlers fix a bug that caused links below the fold
// to be unclickable in macOS Safari.
// Reference: https://github.com/theKashey/react-focus-lock/issues/79
onMouseDown={event => event.preventDefault()}
onClick={event => event.target.focus()}
>
<FocusOn returnFocus={true} onEscapeKey={() => onDismiss()}>
<Fixed
key="overlay"
as={motion.div}
initial={{opacity: 0}}
animate={{opacity: 1}}
exit={{opacity: 0}}
transition={{type: 'tween'}}
top={0}
right={0}
bottom={0}
left={0}
bg="rgba(0, 0, 0, 0.5)"
onClick={() => onDismiss()}
/>
<Fixed
key="drawer"
as={motion.div}
initial={{x: '100%'}}
animate={{x: 0}}
exit={{x: '100%'}}
transition={{type: 'tween', duration: 0.2}}
width={300}
top={0}
right={0}
bottom={0}
bg="gray.0"
style={{zIndex: 1}}
>
{children}
</Fixed>
</FocusOn>
</div>
) : null}
</AnimatePresence>
)
}
export default Drawer
|