jetpack compose - How to use Scaffold

MainActivity.kt

package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.launch

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        val result = remember { mutableStateOf("") }
        val selectedItem = remember { mutableStateOf("favorite")}
        val fabShape = RoundedCornerShape(50)
        val scaffoldState = rememberScaffoldState(
            rememberDrawerState(DrawerValue.Closed)
        )
        val scope = rememberCoroutineScope()

        Scaffold(
            scaffoldState = scaffoldState,

            drawerContent = {
                Column(
                    modifier = Modifier
                        .background(Color(0xFFF0EAD6))
                        .fillMaxSize()
                ) {
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(75.dp),
                        contentAlignment = Alignment.Center
                    ) {
                        Text(
                            text = "APP Name",
                            fontSize = 27.sp,
                            fontFamily = FontFamily.Cursive,
                            textAlign = TextAlign.Center
                        )
                    }

                    Column(
                        modifier = Modifier
                    ) {
                        Row(modifier = Modifier
                            .clickable {
                                scope.launch {
                                    scaffoldState.drawerState.close()
                                    result.value = "Receipt clicked"
                                }
                            }
                            .fillMaxWidth()
                            .padding(8.dp)
                            .padding(start = 16.dp),
                            horizontalArrangement = Arrangement.spacedBy(8.dp)
                        ) {
                            Icon(Icons.Filled.Receipt, contentDescription = "")
                            Text(
                                text = "Receipt",
                                fontWeight = FontWeight.Bold
                            )
                        }

                        Row(modifier = Modifier
                            .clickable {
                                scope.launch {
                                    scaffoldState.drawerState.close()
                                    result.value = "Send clicked"
                                }
                            }
                            .fillMaxWidth()
                            .padding(8.dp)
                            .padding(start = 16.dp),
                            horizontalArrangement = Arrangement.spacedBy(8.dp)
                        ) {
                            Icon(Icons.Filled.Send, contentDescription = "")
                            Text(
                                text = "Send",
                                fontWeight = FontWeight.Bold
                            )
                        }
                    }
                }
            },

            topBar = {
                TopAppBar(
                    title = {
                        Text(text = "Scaffold Layout Example")
                    },

                    navigationIcon = {
                        IconButton(
                            onClick = {
                                scope.launch {
                                    scaffoldState.drawerState.open()
                                }
                            }
                        ) {
                            Icon(Icons.Filled.Menu, contentDescription = "")
                        }
                    },

                    actions = {
                        IconButton(onClick = {
                            // show overflow menu
                        }) {
                            Icon(Icons.Filled.MoreVert, contentDescription = "")
                        }
                    },

                    backgroundColor = Color(0xFFFF9933),
                    elevation = AppBarDefaults.TopAppBarElevation
                )
            },

            content = {
                Box(
                    Modifier
                        .background(Color(0XFFFFDEAD))
                        .padding(16.dp)
                        .fillMaxSize(),
                ) {
                    Text(
                        text = result.value,
                        fontSize = 22.sp,
                        fontFamily = FontFamily.Serif,
                        modifier = Modifier.align(Alignment.Center)
                    )
                }
            },

            floatingActionButton = {
                FloatingActionButton(
                    onClick = {result.value = "FAB clicked"},
                    shape = fabShape,
                    backgroundColor = Color(0xFFDC143C)
                ) {
                    Icon(Icons.Filled.Add,"")
                }
            },
            isFloatingActionButtonDocked = true,
            floatingActionButtonPosition = FabPosition.End,

            bottomBar = {
                BottomAppBar(
                    cutoutShape = fabShape,
                    content = {
                        BottomNavigation() {
                            BottomNavigationItem(
                                icon = {
                                    Icon(Icons.Filled.Favorite , "")
                                },
                                label = { Text(text = "Favorite")},
                                selected = selectedItem.value == "favorite",
                                onClick = {
                                    result.value = "Favorite icon clicked"
                                    selectedItem.value = "favorite"
                                },
                                alwaysShowLabel = false
                            )

                            BottomNavigationItem(
                                icon = {
                                    Icon(Icons.Filled.Upload ,  "")
                                },

                                label = { Text(text = "Upload")},
                                selected = selectedItem.value == "upload",
                                onClick = {
                                    result.value = "Upload icon clicked"
                                    selectedItem.value = "upload"
                                },
                                alwaysShowLabel = false
                            )
                        }
                    }
                )
            }
        )
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //MainContent()
    }
}