diff --git a/app/app/src/main/java/de/haushalt/app/MainScreen.kt b/app/app/src/main/java/de/haushalt/app/MainScreen.kt index 7f6250d..65a7a8c 100644 --- a/app/app/src/main/java/de/haushalt/app/MainScreen.kt +++ b/app/app/src/main/java/de/haushalt/app/MainScreen.kt @@ -1,33 +1,34 @@ package de.haushalt.app -import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding -import androidx.compose.material3.CenterAlignedTopAppBar -import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.foundation.layout.statusBarsPadding import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp +import androidx.navigation.NavController import androidx.navigation.compose.NavHost import androidx.navigation.compose.composable +import androidx.navigation.compose.currentBackStackEntryAsState import androidx.navigation.compose.rememberNavController -@OptIn(ExperimentalMaterial3Api::class) @Composable fun MainScreen() { val navController = rememberNavController() + val backStackEntry by navController.currentBackStackEntryAsState() + val currentRoute = backStackEntry?.destination?.route + Scaffold( - topBar = { - Column { - Navigation() - Subnavigation() - } - } + topBar = { Breadcrumb(currentRoute = currentRoute, navController = navController) } ) { innerPadding -> NavHost( navController = navController, @@ -39,20 +40,43 @@ fun MainScreen() { } } -@OptIn(ExperimentalMaterial3Api::class) @Composable -private fun Navigation() { - CenterAlignedTopAppBar( - title = { Text("Haushalt") } +private fun Breadcrumb(currentRoute: String?, navController: NavController) { + // Trail: (route, label). Erweitert sich pro neuer Destination in späteren Modulen. + val trail = listOf( + "start" to "Haushalt", ) -} - -@Composable -private fun Subnavigation() { Surface( - modifier = Modifier - .fillMaxWidth() - .height(32.dp), - color = MaterialTheme.colorScheme.surfaceVariant - ) {} + modifier = Modifier.fillMaxWidth(), + color = MaterialTheme.colorScheme.surfaceContainer + ) { + Row( + modifier = Modifier + .statusBarsPadding() + .padding(horizontal = 16.dp, vertical = 12.dp), + verticalAlignment = Alignment.CenterVertically + ) { + trail.forEachIndexed { index, (route, label) -> + if (index > 0) { + Text( + text = "›", + modifier = Modifier.padding(horizontal = 6.dp), + color = MaterialTheme.colorScheme.onSurfaceVariant + ) + } + val isCurrent = route == currentRoute + Text( + text = label, + fontWeight = if (isCurrent) FontWeight.SemiBold else FontWeight.Normal, + modifier = if (isCurrent) { + Modifier + } else { + Modifier.clickable { + navController.popBackStack(route, inclusive = false) + } + } + ) + } + } + } } diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 9a43bff..7512dbc 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,16 +1,33 @@