```@ExperimentalLayout @Composable fun mainLayout(...

# compose-desktop

[Glenn Martin]

@ExperimentalLayout
@Composable
fun mainLayout(view: @Composable () -> Unit) {

    Row(Modifier.fillMaxSize()) {
        Box(modifier = Modifier.fillMaxWidth(0.2f), contentAlignment = Alignment.Center) {
            sideBarItems()
        }
        view()
    }
}

this works on first load, but when i call this from an onClick() event on those sidebar items I get an error about calling composable from an onclick()

[Dominaezzz]

Where is your onClick ?

[Dominaezzz]

Also, it looks like you need a state object representing which sidebar item is being viewed/selected.

[Arkadii Ivanov]

You can define all child views as sealed class. E.g.

sealed class Screen {
object Container : Screen()
object Jobs : Screen()
}

Then you need a state:
var screen by remember { mutableStateOf(Screen.Container) }

Then you need to change the state to whatever screen in onClick.

To draw current screen:

when (screen) {
   is Container -> ContainerView()
   is Jobs -> JobsView ()
 }

[xetra11]

@Arkadii Ivanov I solved that via Enum (https://github.com/xetra11/CK3-Workbench/blob/main/src/main/kotlin/com/github/xetra11/ck3workbench/app/ViewManager.kt) - I recently see more people using the "sealed" approach. Is it the more idiomatic way to do that? Just wondering

[Arkadii Ivanov]

Sealed classes can carry arguments, that you may need to pass to screens

[xetra11]

true

[Glenn Martin]

@Dominaezzz the onClick() are on a sidebar text button, the UI is one row with a sidebar and body

[Glenn Martin]

@xetra11 I'm doing something similar here https://gist.github.com/glennmartinez/d2e56563a45ce9fa6b982bfbb6fc7f06 so viewPageWithState takes a pagestate which is an enum and in that class I have a switch statement which matches the pagestate with a particular view, but for me I can't get it to work

[Glenn Martin]

I mean it works on first load but the can't switch the state after an onclick

[Glenn Martin]

@Arkadii Ivanov I see re: the screen method
1. So Screen allows the view to be changed?
2. I guess the switch statement is what I wrap in a composable function and feed that into my layout for the body, correct?
3. what's the correct way to change the state for your example? I'm not too familiar with the remember function

[Arkadii Ivanov]

@Glenn Martin
1. Screen is like a description of what is the current screen and what are parameters
2. You should replace your view() with the switch . It just selects/renders the current screen defined by the state.
3. Your sideBarItems should accept callbacks, e.g. onContainerClicked, onJobsClicked, etc.. Each callback should change the state:

sideBarItems(
    onContainerClicked = { screen = Screen.Container },
    onJobsClicked = { screen = <http://Screen.Jobs|Screen.Jobs> }
)

[Glenn Martin]

oh I see, will give this a shot tonite, thaks for the help

[Glenn Martin]

@xetra11 I was able to checkout your repo and implement the style that you have, will try to do the sealed class approach, but what is the benefit of doing it this way?

[Glenn Martin]

but at least I got my view changing working now

[xetra11]

I think the sealed approach is nice since you do not have to create an enum and a "branch" of the where clause for it. You only need to create a sealed class and it's available right aways since you just need to say MyInterface.view() (example) instead of MemberView.view()

[xetra11]

Just an assumption - currently stuck with Vue.js development so few time for Compose 😄

[xetra11]

will try it out myself next week tho

[Glenn Martin]

how does it know which view to display? do you pass it the view as an argument?

[Glenn Martin]

oh good luck with vue.js heard good things about it

[Glenn Martin]

never used it though, but I love angular 2, having everything there for you is a huge gain coming from React.

[Glenn Martin]

btw if you get an example of the sealed approach pls share boss

[xetra11]

Will do bruh

[xetra11]

Vue.js 3 is unrivaled in my opinion

[Glenn Martin]

for real? I heard both Vue and Angular is way better than react, will need to try Vue next then