class DrawerState(rx.State):
    show_right: bool = False
    show_top: bool = False

    def top(self):
        self.show_top = not (self.show_top)

    def right(self):
        self.show_right = not (self.show_right)


rx.box(
    rx.button(
        "Show Right Drawer", on_click=DrawerState.right
    ),
    rx.drawer(
        rx.drawer_overlay(
            rx.drawer_content(
                rx.drawer_header("Confirm"),
                rx.drawer_body(
                    "Do you want to confirm example?"
                ),
                rx.drawer_footer(
                    rx.button(
                        "Close", on_click=DrawerState.right
                    )
                ),
                bg="rgba(0, 0, 0, 0.3)",
            )
        ),
        is_open=DrawerState.show_right,
    ),
)

rx.box(
    rx.button("Show Top Drawer", on_click=DrawerState.top),
    rx.drawer(
        rx.drawer_overlay(
            rx.drawer_content(
                rx.drawer_header("Confirm"),
                rx.drawer_body(
                    "Do you want to confirm example?"
                ),
                rx.drawer_footer(
                    rx.button(
                        "Close", on_click=DrawerState.top
                    )
                ),
            )
        ),
        placement="top",
        is_open=DrawerState.show_top,
    ),
)