Add NavigationSuiteScaffold around NavHost

android · Sep 24, 2024 · a5cf3da · a5cf3da
1 parent 4d24c67
commit a5cf3da
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 84 deletions.
diff --git a/app/src/main/java/com/google/android/samples/socialite/ui/Main.kt b/app/src/main/java/com/google/android/samples/socialite/ui/Main.kt
@@ -46,6 +46,7 @@ import com.google.android.samples.socialite.ui.home.chatlist.ChatList
 import com.google.android.samples.socialite.ui.home.settings.Settings
 import com.google.android.samples.socialite.ui.home.timeline.Timeline
 import com.google.android.samples.socialite.ui.navigation.Route
+import com.google.android.samples.socialite.ui.navigation.SocialiteNavSuite
 import com.google.android.samples.socialite.ui.photopicker.navigation.navigateToPhotoPicker
 import com.google.android.samples.socialite.ui.photopicker.navigation.photoPickerScreen
 import com.google.android.samples.socialite.ui.player.VideoPlayerScreen
@@ -80,96 +81,105 @@ fun MainNavigation(
         }
     }
 
-    NavHost(
+    SocialiteNavSuite(
         navController = navController,
-        startDestination = Route.ChatsList,
         modifier = modifier,
     ) {
-        composable<Route.ChatsList> {
-            ChatList(
-                onChatClicked = { chatId -> navController.navigate(Route.ChatThread(chatId)) },
-                modifier = Modifier.fillMaxSize(),
-            )
-        }
-
-        composable<Route.Timeline> {
-            Timeline(Modifier.fillMaxSize())
-        }
-
-        composable<Route.Settings> {
-            Settings(Modifier.fillMaxSize())
-        }
-
-        composable<Route.ChatThread>(
-            deepLinks = listOf(
-                navDeepLink {
-                    action = Intent.ACTION_VIEW
-                    uriPattern = "https://socialite.google.com/chat/{chatId}"
-                },
-            ),
-        ) { backStackEntry ->
-            val route: Route.ChatThread = backStackEntry.toRoute()
-            val chatId = route.chatId
-            ChatScreen(
-                chatId = chatId,
-                foreground = true,
-                onBackPressed = { navController.popBackStack() },
-                onCameraClick = { navController.navigate(Route.Camera(chatId)) },
-                onPhotoPickerClick = { navController.navigateToPhotoPicker(chatId) },
-                onVideoClick = { uri -> navController.navigate(Route.VideoPlayer(uri)) },
-                prefilledText = route.text,
-                modifier = Modifier.fillMaxSize(),
-            )
-        }
-
-        composable<Route.Camera> { backStackEntry ->
-            val route: Route.Camera = backStackEntry.toRoute()
-            val chatId = route.chatId
-            Camera(
-                onMediaCaptured = { capturedMedia: Media? ->
-                    when (capturedMedia?.mediaType) {
-                        MediaType.PHOTO -> {
-                            navController.popBackStack()
+        NavHost(
+            navController = navController,
+            startDestination = Route.ChatsList,
+        ) {
+            composable<Route.ChatsList> {
+                ChatList(
+                    onChatClicked = { chatId -> navController.navigate(Route.ChatThread(chatId)) },
+                    modifier = Modifier.fillMaxSize(),
+                )
+            }
+
+            composable<Route.Timeline> {
+                Timeline(Modifier.fillMaxSize())
+            }
+
+            composable<Route.Settings> {
+                Settings(Modifier.fillMaxSize())
+            }
+
+            composable<Route.ChatThread>(
+                deepLinks = listOf(
+                    navDeepLink {
+                        action = Intent.ACTION_VIEW
+                        uriPattern = "https://socialite.google.com/chat/{chatId}"
+                    },
+                ),
+            ) { backStackEntry ->
+                val route: Route.ChatThread = backStackEntry.toRoute()
+                val chatId = route.chatId
+                ChatScreen(
+                    chatId = chatId,
+                    foreground = true,
+                    onBackPressed = { navController.popBackStack() },
+                    onCameraClick = { navController.navigate(Route.Camera(chatId)) },
+                    onPhotoPickerClick = { navController.navigateToPhotoPicker(chatId) },
+                    onVideoClick = { uri -> navController.navigate(Route.VideoPlayer(uri)) },
+                    prefilledText = route.text,
+                    modifier = Modifier.fillMaxSize(),
+                )
+            }
+
+            composable<Route.Camera> { backStackEntry ->
+                val route: Route.Camera = backStackEntry.toRoute()
+                val chatId = route.chatId
+                Camera(
+                    onMediaCaptured = { capturedMedia: Media? ->
+                        when (capturedMedia?.mediaType) {
+                            MediaType.PHOTO -> {
+                                navController.popBackStack()
+                            }
+
+                            MediaType.VIDEO -> {
+                                navController.navigate(
+                                    Route.VideoEdit(
+                                        chatId,
+                                        capturedMedia.uri.toString()
+                                    )
+                                )
+                            }
+
+                            else -> {
+                                // No media to use.
+                                navController.popBackStack()
+                            }
                         }
-
-                        MediaType.VIDEO -> {
-                            navController.navigate(Route.VideoEdit(chatId, capturedMedia.uri.toString()))
-                        }
-
-                        else -> {
-                            // No media to use.
-                            navController.popBackStack()
-                        }
-                    }
-                },
-                modifier = Modifier.fillMaxSize(),
+                    },
+                    modifier = Modifier.fillMaxSize(),
+                )
+            }
+
+            // Invoke PhotoPicker to select photo or video from device gallery
+            photoPickerScreen(
+                onPhotoPicked = navController::popBackStack,
             )
-        }
 
-        // Invoke PhotoPicker to select photo or video from device gallery
-        photoPickerScreen(
-            onPhotoPicked = navController::popBackStack,
-        )
-
-        composable<Route.VideoEdit> { backStackEntry ->
-            val route: Route.VideoEdit = backStackEntry.toRoute()
-            val chatId = route.chatId
-            val videoUri = route.uri
-            VideoEditScreen(
-                chatId = chatId,
-                uri = videoUri,
-                onCloseButtonClicked = { navController.popBackStack() },
-                navController = navController,
-            )
-        }
-
-        composable<Route.VideoPlayer> { backStackEntry ->
-            val route: Route.VideoPlayer = backStackEntry.toRoute()
-            val videoUri = route.uri
-            VideoPlayerScreen(
-                uri = videoUri,
-                onCloseButtonClicked = { navController.popBackStack() },
-            )
+            composable<Route.VideoEdit> { backStackEntry ->
+                val route: Route.VideoEdit = backStackEntry.toRoute()
+                val chatId = route.chatId
+                val videoUri = route.uri
+                VideoEditScreen(
+                    chatId = chatId,
+                    uri = videoUri,
+                    onCloseButtonClicked = { navController.popBackStack() },
+                    navController = navController,
+                )
+            }
+
+            composable<Route.VideoPlayer> { backStackEntry ->
+                val route: Route.VideoPlayer = backStackEntry.toRoute()
+                val videoUri = route.uri
+                VideoPlayerScreen(
+                    uri = videoUri,
+                    onCloseButtonClicked = { navController.popBackStack() },
+                )
+            }
         }
     }
 

diff --git a/app/src/main/java/com/google/android/samples/socialite/ui/navigation/SocialiteNavigation.kt b/app/src/main/java/com/google/android/samples/socialite/ui/navigation/SocialiteNavigation.kt
@@ -26,6 +26,7 @@ import androidx.compose.material3.Text
 import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
 import androidx.navigation.NavBackStackEntry
@@ -104,12 +105,14 @@ enum class TopLevelDestination(
 @Composable
 fun SocialiteNavSuite(
     navController: NavController,
+    modifier: Modifier = Modifier,
     content: @Composable () -> Unit
 ) {
     val navBackStackEntry by navController.currentBackStackEntryAsState()
     val topLevelDestination = TopLevelDestination.fromNavBackStackEntry(navBackStackEntry)
 
     NavigationSuiteScaffold(
+        modifier = modifier,
         navigationSuiteItems = {
             TopLevelDestination.entries.forEach {
                 val isSelected = it == topLevelDestination