[Bug]: Top app bar dissapears in not top level destinations

[padrecedano]

Is there an existing issue for this?

• I have searched the existing issues

Is there a StackOverflow question about this issue?

• I have searched StackOverflow

What happened?

In the source code we see a clear intention that the TopAppBar is not displayed in those destinations that do not belong to TopLevelDestination:

            // Show the top app bar on top level destinations.
            val destination = appState.currentTopLevelDestination
            var shouldShowTopAppBar = false

            if (destination != null) {
                shouldShowTopAppBar = true
                NiaTopAppBar(
                    titleRes = destination.titleTextId,
                    navigationIcon = NiaIcons.Search,
                    navigationIconContentDescription = stringResource(
                        id = settingsR.string.feature_settings_top_app_bar_navigation_icon_description,
                    ),

What is the reason for this being mandatory and how can I change it?

In my case, I want to display content from the main menu of the application, and I need that content to have the TopAppBar.

I show two screenshots.

In this second screenshot, when I scroll up, the text blends in with the device bar showing the time:

Code:

@ExperimentalFoundationApi
@Composable
fun FileScreen(
    onFileClick: (String) -> Unit,
    modifier: Modifier = Modifier,
    fileName: String?,
    viewModel: FileViewModel = hiltViewModel(),

    ) {

    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
    FileScreen(modifier = modifier, uiState = uiState)
}

---

@ExperimentalFoundationApi
@Composable
internal fun FileScreen(
    modifier: Modifier,
    uiState: FileViewModel.FileUiState
) {

    val state = rememberLazyListState()
    Box(
        modifier = modifier,
    ) {
        LazyColumn(
            state = state,
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            item {
                Spacer(Modifier.windowInsetsTopHeight(WindowInsets.safeDrawing))
            }
            when (uiState) {
                FileViewModel.FileUiState.Empty -> item { EmptyState() }
                is FileViewModel.FileUiState.Error -> item { ErrorState() }
                is FileViewModel.FileUiState.Loaded -> item {
                    FileToolbar(uiState = uiState)
                    FileResourceCardExpanded()
                }
                FileViewModel.FileUiState.Loading -> item { LoadingState() }
            }
            item {
                Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.safeDrawing))
            }
        }
        val itemsAvailable = 1
        val scrollbarState = state.scrollbarState(
            itemsAvailable = itemsAvailable,
        )
        state.DraggableScrollbar(
            modifier = Modifier
                .fillMaxHeight()
                .windowInsetsPadding(WindowInsets.systemBars)
                .padding(horizontal = 2.dp)
                .align(Alignment.CenterEnd),
            state = scrollbarState,
            orientation = Orientation.Vertical,
            onThumbMoved = state.rememberDraggableScroller(
                itemsAvailable = itemsAvailable,
            ),
        )
    }
}

---

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FileToolbar(
    uiState: FileViewModel.FileUiState,
    modifier: Modifier = Modifier,
    showBackButton: Boolean = true,
    onBackClick: () -> Unit = {},
) {
    Row(
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically,
        modifier = modifier
            .fillMaxWidth()
            .padding(bottom = 32.dp),
    ) {
        if (showBackButton) {
            IconButton(onClick = { onBackClick() }) {
                Icon(
                    imageVector = LPlusIcons.ArrowBack,
                    contentDescription = stringResource(
                        id = R.string.core_ui_back,
                    ),
                )
            }
        } else {
            Spacer(modifier = Modifier.width(1.dp))
        }
    }
}

---

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FileResourceCardExpanded() {
    Card(
        shape = RoundedCornerShape(16.dp),
        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface),
    ) {
        Column {
            Box(
                modifier = Modifier.padding(16.dp),
            ) {
                Column {
                    Spacer(modifier = Modifier.height(12.dp))
                    Row {
                        var title: String = "Title"
                        UniversalisResourceTitle(
                            title,
                            modifier = Modifier.fillMaxWidth((.8f)),
                        )
                        Spacer(modifier = Modifier.weight(1f))
                    }
                    Spacer(modifier = Modifier.height(14.dp))
                    Row(verticalAlignment = Alignment.CenterVertically) {
                        Spacer(modifier = Modifier.height(14.dp))
                        var lipsum = LoremIpsum()
                        Text(lipsum.values.last())
                    }
                }
            }
        }
    }
}

Relevant logcat output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[dturner]

In the source code we see a clear intention that the TopAppBar is not displayed in those destinations that do not belong to TopLevelDestination

That's right. The designs for screens that aren't top level destinations, such as the Topic detail screen, don't have a top app bar. You can safely remove this logic if you want to display the top app bar on every screen.