Main Activity Code :

package com.example.initialproject

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavGraph.Companion.findStartDestination
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
import com.example.initialproject.model.MainModel
import com.example.initialproject.repository.MainRepository
import com.example.initialproject.ui.theme.InitialProjectTheme

class MainActivity : ComponentActivity() {

    lateinit var navController: NavHostController
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            navController = rememberNavController()
            InitialProjectTheme {
                MainScreen(navController = navController)
            }
        }
    }
}
@OptIn(ExperimentalMaterial3Api::class)

@Composable
fun MainScreen(navController: NavHostController) {
    MaterialTheme(
    ) {
      ContentBody(navController = navController, innerPadding = PaddingValues(16.dp))
    }
}
@Composable
fun ContentBody(
    navController: NavHostController,
    innerPadding: PaddingValues,
) {
    SetupNavGraph(navController = navController)
    val mainRepository = MainRepository();
    val getMainData = mainRepository.getMainData();
    Column(
        modifier = Modifier
            .padding(innerPadding),
        verticalArrangement = Arrangement.spacedBy(16.dp),
    ) {
        LazyColumn(
            contentPadding = PaddingValues(all = 12.dp),
            verticalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            items(getMainData.count()) { i ->
                MainCard(
                    mainModel = getMainData[i],
                    index = i + 1,
                    navController = navController,
                );
            }
        }
    }

}

@Composable
fun MainCard(
    mainModel: MainModel,
    index: Int,
    navController: NavHostController,
) {
    Column(
        modifier = Modifier.fillMaxWidth()
    ){
        Text(
            text = "$index. ${mainModel.title} example",
            fontSize = 20.sp,
            fontWeight = FontWeight.Medium,
            textAlign = TextAlign.Justify,
            modifier = Modifier
                .background(Color.Cyan)
                .padding(horizontal = 16.dp, vertical = 8.dp)
                .clickable {
                    if (mainModel.title == "Pass single req arg while navigation")
                        navController.navigate(
                            route = Screen.PassSingleReqArgWhileNavigation.passTitle(
                                "I'm Title"
                            )
                        )
                    else
                        navController.navigate(route = mainModel.route){
                            // Pop up to the start destination of the graph to
                            // avoid building up a large stack of destinations
                            // on the back stack as users select items
                            popUpTo(navController.graph.findStartDestination().id) {
                                saveState = true
                            }
                            // Avoid multiple copies of the same destination when
                            // reselecting the same item
                            launchSingleTop = true
                            // Restore state when reselecting a previously selected item
                            restoreState = true
                        }
                }
        )
    }
}

now,

on any of the card click it is navigated to respective composable function

for example: if i click on Password Text Form Example then UI in password textform screen is shown but the **above image code ** is still there visible in UI :

I’m new to kotlin so I don’t know if the navigation happened but I was expecting the first UI to remain in stack and the Password Text Form Example UI should only be seen

Navigation Code

package com.example.initialproject

import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.navigation.NavHostController
import androidx.navigation.NavType
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.navArgument

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SetupNavGraph(
    navController: NavHostController
) {
    Surface {
        NavHost(
            navController = navController,
            startDestination = Screen.Column.route,
            modifier = Modifier,
            builder = {
                composable(route = Screen.Column.route) {
                    UsingColumn(navController = navController)
                }
                composable(route = Screen.Row.route) {
                    UsingRow(navController = navController)
                }
                composable(route = Screen.Box.route) {
                    UsingBox(navController = navController)
                }
                composable(route = Screen.TextCustomization.route) {
                    TextCustomization(navController = navController)
                }
                composable(route = Screen.AnnotatedString.route) {
                    CustomAnnotatedString(navController = navController)
                }
                composable(route = Screen.TextSelection.route) {
                    CustomTextSelection(navController = navController)
                }
                composable(route = Screen.Superscript.route) {
                    CustomScriptText(navController = navController)
                }
                composable(route = Screen.Subscript.route) {
                    CustomScriptText(navController = navController)
                }
                composable(route = Screen.ExpandedCard.route) {
                    CustomExpandedCard(navController = navController)
                }
                composable(route = Screen.TextForm.route) {
                    CustomTextFormField(navController = navController)
                }
                composable(route = Screen.SignUpWithGoogle.route) {
                    SignUpWithGoogleCard(navController = navController)
                }
                composable(Screen.CoilImageLoading.route) {
                    CustomImageLoadingCard(navController = navController)
                }
                composable(route = Screen.PasswordTextForm.route) {
                    CustomPasswordTextFormField(navController = navController)
                }
                composable(route = Screen.GradientButton.route) {
                    CustomGradientButtonScreen(navController = navController)
                }
                composable(route = Screen.LazyColumn.route) {
                    CustomLazyColumn(navController = navController)
                }
                composable(route = Screen.TextFormCharacterCount.route) {
                    CustomTextFormFieldCharacterCount(navController = navController)
                }
                composable(route = Screen.CircularIndicatorCard.route) {
                    CustomCircularIndicatorCard(navController = navController)
                }
                composable(
                    route = Screen.PassSingleReqArgWhileNavigation.route,
                    arguments = listOf(navArgument(PAGE_TITLE) {
                        type = NavType.StringType
                    })
                ) {
                    CustomPassSingleReqArgWhileNavigation(
                        navController = navController,
                        title = it.arguments?.getString(PAGE_TITLE).toString()
                    )
                }
            },
        )
    }
}

package com.example.initialproject

const val PAGE_TITLE = "I'm Title"

sealed class Screen(val route: String){
    object Column: Screen(route = "column_screen")
    object Row: Screen(route = "row_screen")
    object Box: Screen(route = "box_screen")
    object TextCustomization: Screen(route = "text_customization_screen")
    object AnnotatedString: Screen(route = "annotated_string_screen")
    object TextSelection: Screen(route = "text_selection_screen")
    object Superscript: Screen(route = "superscript_screen")
    object Subscript: Screen(route = "subscript_screen")
    object ExpandedCard: Screen(route = "expanded_card_screen")
    object TextForm: Screen(route = "textForm_screen")
    object SignUpWithGoogle: Screen(route = "sign_up_with_google_screen")
    object CoilImageLoading: Screen(route = "coil_image_loading_screen")
    object PasswordTextForm: Screen(route = "password_text_form_screen")
    object GradientButton: Screen(route = "gradient_button_screen")
    object LazyColumn: Screen(route = "lazy_column_screen")
    object TextFormCharacterCount: Screen(route = "text_form_character_count_screen")
    object CircularIndicatorCard: Screen(route = "circular_indicator_card_screen")
    object PassSingleReqArgWhileNavigation: Screen(route = "pass_single_req_arg_while_navigating/${PAGE_TITLE}"){
        fun passTitle(title: String):String {
            return  "pass_single_req_arg_while_navigating/${title}"
        }
    }
}

I was expecting the first UI to remain in stack and the Password Text Form Example UI should only be seen