ScalablyTyped/community

@react
object Header {

    private val css = HeaderStyle

    case class Props(menuHandler: () => Unit, userProfile: String)

    val component = FunctionalComponent[Props] { props =>

        val (profile, setProfile) = useState(???)
        val (profileOpen, setProfileOpen) = useState(false)

        def profileClickHandlerOpen(event: SyntheticMouseEvent[dom.raw.HTMLElement]): Unit = {
            setProfile(event.currentTarget)
            setProfileOpen(true)
        }

        def profileClickHandlerClose: SyntheticEvent[Event, Object] => Unit = _ => {
            setProfileOpen(false)
            setProfile(???)
        }

        header(className := "headerArea")(
            Grid.container(true).spacing(GridSpacing.`8`).alignItems(GridItemsAlignment.center)(
                Hidden.mdUp(true)(
                    Grid.item(true).xs(GridSize.`2`)(
                        ul(className := "headerLeft")(
                            li(onClick := props.menuHandler, className := "menuTrigger")(
                                svg(slinky.web.svg.className := "svg-inline--fa fa-bars fa-w-14 fa-fw", slinky.web.svg.role := "img", slinky.web.svg.aria-"hidden" := "true", CustomAttribute[String]("focusable") := "false", CustomAttribute[String]("date-prefix") := "fal", 
                                                CustomAttribute[String]("data-icon") := "bars", CustomAttribute[String]("xlmns") := "http://www.w3.org/2000/svg", CustomAttribute[String]("viewBox") := "0 0 448 512")(
                                                    path(fill := "currentColor", d := "M442 114H6a6 6 0 0 1-6-6V84a6 6 0 0 1 6-6h436a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6zm0 160H6a6 6 0 0 1-6-6v-24a6 6 0 0 1 6-6h436a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6zm0 160H6a6 6 0 0 1-6-6v-24a6 6 0 0 1 6-6h436a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6z")
                                                )
                            )
                        )
                    )
                ),
                Grid.md(GridSize.`12`).item(true).xs(GridSize.`10`)(
                    ul(className := "headerRight")(
                        div(className := "profileWrap")(
                            span(className := "profileImg")(
                                img(src := Avatar.asInstanceOf[String], alt := "avatar")
                            ),
                            span(onClick := (event => profileClickHandlerOpen(event)), className := "name")(
                                span(className := "text")("test"),
                                i(className := "fa fa-angle-down")
                            ),
                            Menu.apply(profileOpen).keepMounted(true).anchorEl(profile).onClose(profileClickHandlerClose).elevation(1).className("profileWrapper").anchorOrigin(PopoverOrigin(center, top)).getContentAnchorElNull
                                .transformOrigin(PopoverOrigin(center, top)).classes(PartialClassNameMapMenuCl.apply().setPaper("profilePaper"))(
                                    ul(
                                        li("test"),
                                        li("test")
                                    )
                                    /* Button.component(router.Link[String](to = "/profile"): ReactElement)("Profile"),
                                    Button.component(router.Link[String](to = "/"): ReactElement)("Logout") */
                                )
                        )
                    )
                )
            )
        )
    }
}