Search code examples
androidmaterial-designnavigation-drawerandroid-jetpack-composekotlin-multiplatform

Change the size of ModalDrawer when expanded, Jetpack Compose


I am trying to implement a drawer in my application but it's currently way to large. I'll clarify what I mean and I am aware of other questions but they don't seem to have gotten a proper answer and my usecase seems to differ a bit.

enter image description here

This is the code that has helped me achieve this

@Composable
fun MainContent(component: Main) {

    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    val openDrawer = {
        scope.launch {
            drawerState.open()
        }
    }

    Children(routerState = component.routerState, animation = crossfadeScale()) {
        when (val child = it.instance) {
            is Main.Child.Dashboard -> {
               HomeView() { ModalDrawer(drawerState) { DashboardContent(child.component) { openDrawer() } } }
            }
        }
    }
}

@Composable  // This is a wrapper around current screen
fun HomeView( content: @Composable () -> Unit) {
    Scaffold(modifier = Modifier.fillMaxSize()) {
        content()
    }
}

@Composable // Here is the actual drawer
fun ModalDrawer(drawerState: DrawerState, content: @Composable () -> Unit) {
    ModalDrawer(
        drawerState = drawerState,
        drawerContent = {
            Text("1234")
            Text("12345")
        },
        content = {
            content()
        },
        gesturesEnabled = drawerState.isOpen
    )
}

the children part you can ignore, it just basically checks what screen is currently active (right now its only dashboard, but as I add screens to the mixture it will also feature other ones, and to work properly with the Drawer I had to go about this way.)

This is a multiplatform app, all of the compose code is in the CommonMain Module.


Solution

  • No, this was build using material guidelines and this size cannot be changed

    But you can take source code of this composable and create your own modal drawer.

    It'll take your some time, try copying all code from container file and you will be left to deal with a small number of internals