# ModalDrawer

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material/ModalDrawer.composable#ModalDrawer(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material.DrawerState,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)( drawerContent: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, drawerState: https://developer.android.com/reference/kotlin/androidx/compose/material/DrawerState, gesturesEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, drawerShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, drawerElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, drawerBackgroundColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, drawerContentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, scrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` [Material Design modal navigation drawer](https://material.io/components/navigation-drawer#modal-drawer) | Cmn |

## Functions

### ModalDrawer

Cmn Artifact: [androidx.compose.material:material](https://developer.android.com/jetpack/androidx/releases/compose-material) [View Source](https://cs.android.com/search?q=file:androidx/compose/material/Drawer.kt+function:ModalDrawer)

```
@Composable
fun ModalDrawer(
    drawerContent: @Composable ColumnScope.() -> Unit,
    modifier: Modifier = Modifier,
    drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
    gesturesEnabled: Boolean = true,
    drawerShape: Shape = DrawerDefaults.shape,
    drawerElevation: Dp = DrawerDefaults.Elevation,
    drawerBackgroundColor: Color = DrawerDefaults.backgroundColor,
    drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
    scrimColor: Color = DrawerDefaults.scrimColor,
    content: @Composable () -> Unit
): Unit
```

[Material Design modal navigation drawer](https://material.io/components/navigation-drawer#modal-drawer)

Modal navigation drawers block interaction with the rest of an app's content with a scrim. They are elevated above most of the app's UI and don't affect the screen's layout grid.

![Modal drawer
image](https://developer.android.com/images/reference/androidx/compose/material/modal-drawer.png)

See `https://developer.android.com/reference/kotlin/androidx/compose/material/BottomDrawer.composable#BottomDrawer(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material.BottomDrawerState,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)` for a layout that introduces a bottom drawer, suitable when using bottom navigation.

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.DrawerValue
import androidx.compose.material.ModalDrawer
import androidx.compose.material.Text
import androidx.compose.material.rememberDrawerState
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalDrawer(
    drawerState = drawerState,
    drawerContent = {
        Button(
            modifier = Modifier.align(Alignment.CenterHorizontally).padding(top = 16.dp),
            onClick = { scope.launch { drawerState.close() } },
            content = { Text("Close Drawer") },
        )
    },
    content = {
        Column(
            modifier = Modifier.fillMaxSize().padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Text(text = if (drawerState.isClosed) ">>> Swipe >>>" else "<<< Swipe <<<")
            Spacer(Modifier.height(20.dp))
            Button(onClick = { scope.launch { drawerState.open() } }) { Text("Click to open") }
        }
    },
)
```

| Parameters |
|---|---|
| `drawerContent: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | composable that represents content inside the drawer |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | optional modifier for the drawer |
| `drawerState: https://developer.android.com/reference/kotlin/androidx/compose/material/DrawerState = rememberDrawerState(DrawerValue.Closed)` | state of the drawer |
| `gesturesEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether or not drawer can be interacted by gestures |
| `drawerShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = DrawerDefaults.shape` | shape of the drawer sheet |
| `drawerElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = DrawerDefaults.Elevation` | drawer sheet elevation. This controls the size of the shadow below the drawer sheet |
| `drawerBackgroundColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = DrawerDefaults.backgroundColor` | background color to be used for the drawer sheet |
| `drawerContentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = contentColorFor(drawerBackgroundColor)` | color of the content to use inside the drawer sheet. Defaults to either the matching content color for `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#ModalDrawer(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material.DrawerState,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)`, or, if it is not a color from the theme, this will keep the same value set above this Surface. |
| `scrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = DrawerDefaults.scrimColor` | color of the scrim that obscures content when the drawer is open |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | content of the rest of the UI |

| Throws |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-illegal-state-exception/index.html` | when parent has `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/-companion/-p-o-s-i-t-i-v-e_-i-n-f-i-n-i-t-y.html` width |