Navigation Bar using Jetpack Compose

Hi , let see how to design Navigation Bar using jetpack compose. For that first we need to design the drawer content with heading and sub content for menu items. So lets creates a MenuItem data class for items

package com.sample.navigationbar

import androidx.compose.ui.graphics.vector.ImageVector

data class MenuItem(
    val menuName: String,
    val imageIcon: ImageVector
)

Followed by header and sub content of drawer layout

package com.sample.navigationbar

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.unit.sp

@Composable
fun HeaderContent() {
    Box(modifier = Modifier
        .fillMaxWidth()
        .background(Color.Blue),
        contentAlignment = Alignment.Center
    ) {
         Text(
             text = stringResource(id = R.string.app_name),
             fontStyle = FontStyle.Italic,
             fontSize = 22.sp
         )
    }
}

@Composable
fun SubContent(
    menuItem: List<MenuItem>,
    onClick: (MenuItem) -> Unit
) {
    LazyColumn {
        items(menuItem) { menuItem ->
              Row(modifier = Modifier
                  .fillMaxWidth(),
                  verticalAlignment = Alignment.CenterVertically
              ) {
                  IconButton(onClick = { onClick(menuItem) }) {
                         Icon(imageVector = menuItem.imageIcon, contentDescription = null)
                  }
                  Text(
                      modifier = Modifier
                          .weight(1f),
                      text = menuItem.menuName,
                      fontStyle = FontStyle.Italic,
                      fontSize = 15.sp
                  )
              }
        }
    }
}

Next lets create a navigation top bar

package com.sample.navigationbar

import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.runtime.Composable
import androidx.compose.ui.res.stringResource

@Composable
fun NavigationTopBar(
    onIconClick:() -> Unit
) {
    TopAppBar(
        title = {
            stringResource(id = R.string.app_name)
        },
        navigationIcon = {
            IconButton(onClick = { onIconClick() }) {
                 Icon(imageVector = Icons.Default.Menu, contentDescription = null)
            }
        },
        contentColor = MaterialTheme.colors.onPrimary,
        backgroundColor = MaterialTheme.colors.primary
    )
}

Finally we call all this from the MainActivity

package com.sample.navigationbar

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.tooling.preview.Preview
import com.sample.navigationbar.ui.theme.NavigationBarTheme
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NavigationBarTheme {

                val scaffoldState = rememberScaffoldState()
                val scope = rememberCoroutineScope()

                val menuItemList = mutableListOf(
                    MenuItem(
                        "Home",
                        Icons.Default.Home
                    ),
                    MenuItem(
                        "Favorite",
                        Icons.Default.Favorite
                    )
                )
                  Scaffold(
                      scaffoldState = scaffoldState,
                      drawerContent = {
                          HeaderContent()
                          SubContent(
                              menuItem = menuItemList,
                              onClick = {
                                  println(it.menuName)
                              }
                          )
                      },
                      topBar = {
                          NavigationTopBar {
                              scope.launch {
                                  scaffoldState.drawerState.open()
                              }
                          }
                      },
                      drawerGesturesEnabled = scaffoldState.drawerState.isOpen
                  ) {

               }
            }
        }
    }
}

And on final Run you can see the output Thanks