Drawer

open FS.FluentUI.V8toV9

[<ReactComponent>]
let DrawerTest() =
    let isOpen, setIsOpen = React.useState false
    Fui.stack [
        stack.children [
            Fui.overlayDrawer [
                overlayDrawer.modalType.nonModal
                overlayDrawer.open' isOpen
                overlayDrawer.onOpenChange (fun (data: DialogOpenChangeData<MouseEvent>) -> setIsOpen data.``open``)
                overlayDrawer.children [
                    Fui.drawerHeader [
                        Fui.drawerHeaderTitle [
                            drawerHeaderTitle.action (
                                Fui.button [
                                    button.appearance.subtle
                                    button.ariaLabel "subtle"
                                    button.icon (
                                        Fui.icon.dismissRegular [ icon.size.``48`` ]
                                    )
                                    button.onClick (fun _ -> setIsOpen false)
                                ]
                            )
                            drawerHeaderTitle.text "Overlay Drawer"
                        ]
                    ]
                    Fui.drawerBody [
                        Fui.text "Drawer content"
                    ]
                ]
            ]
            Fui.button [
                button.appearance.primary
                button.onClick (fun _ -> setIsOpen (isOpen |> not))
                button.text "Toggle"
            ]
        ]
    ]