Nested drawers?

[socketopp]

Hi, how does this component work with nested drawers like in this example?
https://plnkr.co/edit/fojeyUjllAJ5UYejYf0m?p=preview&preview
Been thinking how to implement it myself. The example is referenced in this stack overflow question.
https://stackoverflow.com/questions/29807207/reactjs-sidebar-with-multiple-views

[Farzin-Firoozi]

Hi there!
in order to have this, you need to put another drawer inside the body of the root drawer.

Here is an example for it.

import React, { useState } from 'react'

import Drawer from 'react-modern-drawer'
import 'react-modern-drawer/dist/index.css'

const App = () => {
    const [isRightOpen, setIsRightOpen] = useState(false)

    const toggleRight = () => {
        setIsRightOpen((prev) => !prev)
    }

    const btnStyle = {
        backgroundColor: '#03adfc',
        color: '#fff',
        borderRadius: '5px',
        border: 'none',
        padding: '10px 25px',
        cursor: 'pointer',
        margin: 5,
        width: 200,
    }

    return (
        <div
            style={{
                justifyContent: 'center',
                alignItems: 'center',
                width: '100%',
                height: '100vh',
                display: 'flex',
            }}
        >
            <div style={{ display: 'flex', flexDirection: 'column' }}>
                <button style={btnStyle} onClick={toggleRight}>
                    Open Right
                </button>
            </div>

            <Drawer
                open={isRightOpen}
                onClose={toggleRight}
                direction='right'
                size={300}
            >
                <DrawerBody />
            </Drawer>
        </div>
    )
}

export default App

const DrawerBody = () => {
    const [showInside, setShowInside] = useState(false)

    const closeInside = () => {
        setShowInside(false)
    }

    const openInside = () => {
        setShowInside(true)
    }

    return (
        <div style={{ padding: 20 }}>
            <h1 style={{ fontWeight: 'bold' }}>Hello World! 🚀🥳</h1>
            <button onClick={openInside}>open</button>
            <Drawer
                open={showInside}
                onClose={closeInside}
                direction='right'
                size={300}
                enableOverlay={false}
            >
                I am inside
                <button onClick={closeInside}>close</button>
            </Drawer>
        </div>
    )
}

I hope this helps you. :)

[socketopp]

Thanks for the help. Just got as question, how do you close the outmost drawer when a click is outside? I haven't figured out how that is made by looking at the code.

[Farzin-Firoozi]

By default the drawer component has an overlay that can be enabled or vice Versa with enableOverlay prop and is true by default, when you click on it the close() function gets called.
In this example you just have to enable the overlay on the outmost drawer and inner drawers' overlay should be disabled, same as the above code 👆🏻.

[socketopp]

How is it possible that the child also closes when the parent drawer closes?

[socketopp]

Btw, any idea how to fix this error?

Update:
I was missing customIdSuffix param.

[Farzin-Firoozi]

How is it possible that the child also closes when the parent drawer closes?

You can simply add a useEffect and check whether the drawer is open and if not, change the state of inner drawers to closed.