OffscreenContainer

The OffscreenContainer component is a simple container that sits offscreen until it is activated.

The OffscreenContainer component will receive a stateful show prop, as well as its state setter function setShow prop. The show prop will drive the animation, while setShow is used to close the navigation when the button is clicked.

import { useSpring, animated } from 'react-spring'
import { Box, Button } from '@intouchg/components'

const OffscreenContainer = ({ show, setShow, children, ...props }) => {
    const styles = useSpring({ x: show ? '0%' : '-100%' })

    return (
        <animated.div
            style={{
                position: 'fixed',
                top: '0',
                left: '0',
                zIndex: '10',
                ...styles,
            }}
        >
            <Box {...props}>
                <Button onClick={() => setShow(false)}>
                    Close
                </Button>
                {children}
            </Box>
        </animated.div>
    )
}

export { OffscreenContainer }

Use the OffscreenContainer component in your layout.

import { useState } from 'react'
import { Button, Text } from '@intouchg/components'
import { OffscreenNav } from './OffscreenNav'

const MyPage = () => {
    const [ show, setShow ] = useState(false)

    return (
        <>
            <Button onClick={() => setShow(true)}>
                Open
            </Button>
            <OffscreenContainer
                show={show}
                setShow={setShow}
            >
                <Text>
                    Hello world!
                </Text>
            </OffscreenContainer>
        </>
    )
}