I'm trying to build tabs component. So it takes `F...

# fritz2

[Pitel]

I'm trying to build tabs component. So it takes Flow<List<MenuData>> (MenuData contains the title and link for Router) as a parameter. So I use Flow<List<>>.renderEach() to render the items. So far so good, it works. But now, I want to highlight (just change CSS, not DOM) the currenty selected item from Router. And I can'd find a way to do it. I tried combine my flow with Router.data, but then i can't use Flow<List<>>.renderEach(). Is there some elegant solution to it?

[Christian Hausknecht]

Can you explain, why exactly the combine prohibits the usage of some renderAech ? In general without deeper knowledge about your code there has to be some merging of different flows, if the tabs must absolutely be reactive (To be honest I have my doubts that is is really needed!)

Can you probably show us some sketch of the approach to get more details? Or explain more detailed why you cannot use the render method?

[Jan Weidenhaupt]

@Pitel If I get you right, you wan't to dynamically change the styling of your current tab. Maybe this code snippet helps:

fun MenuComponent.menuAnchor(linkText: String) {
    val selected = style {
        color { gray100 }
        background {
            color { primary.main }
        }
    }

    val isActive = router.data.map { hash -> hash == linkText }
        .distinctUntilChanged()

    link {
        text(linkText)
        href("#$linkText")
        element {
            className(selected.whenever(isActive).name)
        }
    }
}