Is there a way to implement a dropdown menu within a topbar?

Question

I am relatively new to Kotlin. Currently I am making a demo for an app, in the demo I have a CenterAlignedTopBar with a title and a navigationIcon. Eventually I want to use the navigationIcon to show a LazyColumn with links to different pages of the app, but I don't know where to start.

I have tried to use parts of an tutorial I followed to learn, tried to put an image in the topbar and searched online for an answer. I couldn't find an answer that was helpful.

Below you can find the code where I want to implement it.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun PresentAppAppBar(
    modifier: Modifier = Modifier,
) {
    CenterAlignedTopAppBar(
        title = { Text(stringResource(R.string.app_name)) },
        navigationIcon = {
            Icon(
               imageVector = Icons.Filled.Menu,
               modifier = Modifier
                   .clickable { /* TODO */ }
                   .padding(8.dp)
                   .size(32.dp),
               contentDescription = null
            )
        },
        modifier = modifier
    )
}

Answer 1

I believe this will solve your problem (That is assuming i understand your issue)

`@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppBar(
) {
    var showDropDownMenu by remember { mutableStateOf(false) }

    TopAppBar(
        {
            Text(
                text = "Top Bar Title",
            )
        }, actions = {

            IconButton(
                onClick = { showDropDownMenu = true }) {
                Icon(Icons.Filled.MoreVert, null)

            }

            DropdownMenu(
                showDropDown, { showDropDown = false }
             // offset = DpOffset((-102).dp, (-64).dp),
            ) {
                DropdownMenuItem(text = { Text(text = "Drop down item") }, leadingIcon = {
                    Icon(
                        Icons.Filled.Home
                        )
                }, onClick = {
                    showDropDown = false
                })
            }
        }

    )

}
`

Answer 2

Can you try this once -

@Composable
    fun CenterAlignedTopBarWithDropdownMenu() {
        CenterAlignedTopBar {
            Text(text = "App Title")
    
            Spacer(modifier = Modifier.weight(1f))
    
            IconButton(
                onClick = { expanded = !expanded },
                modifier = Modifier.padding(horizontal = 16.dp)
            ) {
                Icon(Icons.Default.MoreVert)
            }
    
            DropdownMenu(
                expanded = expanded,
                onDismissRequest = { expanded = false },
                modifier = Modifier.padding(horizontal = 16.dp)
            ) {
                DropdownMenuItem(onClick = { /* Handle item click */ }) {
                    Text("Option 1")
                }
                DropdownMenuItem(onClick = { /* Handle item click */ }) {
                    Text("Option 2")
                }
                DropdownMenuItem(onClick = { /* Handle item click */ }) {
                    Text("Option 3")
                }
            }
        }
    }