Refactor(Navigation): Optimize navigation bar switching transition animation

app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/OxygenNavHost.kt

@@ -10,7 +10,8 @@ fun OxygenNavHost(
     modifier: Modifier = Modifier,
     appState: OxygenAppState,
     onShowSnackbar: suspend (message: String, action: String?) -> Boolean,
-    startDestination: String
+    startDestination: String,
+    isVertical: Boolean
 ) {
     val navController = appState.navController
     NavHost(
@@ -29,9 +30,11 @@ fun OxygenNavHost(
             onBackClick = navController::popBackStack
         )
         toolStoreScreen(
+            isVertical = isVertical,
             onNavigateToToolView = navController::navigateToToolView
         )
         toolsScreen(
+            isVertical = isVertical,
             onShowSnackbar = onShowSnackbar,
             onNavigateToToolView = navController::navigateToToolView,
             onNavigateToToolStore = { appState.navigateToTopLevelDestination(TopLevelDestination.ToolStore) }
@@ -40,7 +43,7 @@ fun OxygenNavHost(
             onBackClick = navController::popBackStack
         )
         starScreen(
-
+            isVertical = isVertical
         )
     }
 }

app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/StarNavigation.kt

@@ -1,5 +1,9 @@
 package top.fatweb.oxygen.toolbox.navigation
 
+import androidx.compose.animation.slideInHorizontally
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutHorizontally
+import androidx.compose.animation.slideOutVertically
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.NavOptions
@@ -10,9 +14,29 @@ const val STAR_ROUTE = "star_route"
 
 fun NavController.navigateToStar(navOptions: NavOptions) = navigate(STAR_ROUTE, navOptions)
 
-fun NavGraphBuilder.starScreen() {
+fun NavGraphBuilder.starScreen(
+    isVertical: Boolean
+) {
     composable(
-        route = STAR_ROUTE
+        route = STAR_ROUTE,
+        enterTransition = {
+            when (initialState.destination.route) {
+                TOOL_STORE_ROUTE, TOOLS_ROUTE ->
+                    if (isVertical) slideInHorizontally(initialOffsetX = { fullWidth -> fullWidth })
+                    else slideInVertically(initialOffsetY = { fullHeight -> fullHeight })
+
+                else -> null
+            }
+        },
+        exitTransition = {
+            when (targetState.destination.route) {
+                TOOL_STORE_ROUTE, TOOLS_ROUTE ->
+                    if (isVertical) slideOutHorizontally(targetOffsetX = { fullWidth -> fullWidth })
+                    else slideOutVertically(targetOffsetY = { fullHeight -> fullHeight })
+
+                else -> null
+            }
+        }
     ) {
         StarRoute()
     }

app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/ToolStoreNavigation.kt

@@ -1,5 +1,9 @@
 package top.fatweb.oxygen.toolbox.navigation
 
+import androidx.compose.animation.slideInHorizontally
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutHorizontally
+import androidx.compose.animation.slideOutVertically
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.NavOptions
@@ -8,13 +12,33 @@ import top.fatweb.oxygen.toolbox.ui.tool.ToolStoreRoute
 
 const val TOOL_STORE_ROUTE = "tool_store_route"
 
-fun NavController.navigateToToolStore(navOptions: NavOptions? = null) = navigate(TOOL_STORE_ROUTE, navOptions)
+fun NavController.navigateToToolStore(navOptions: NavOptions? = null) =
+    navigate(TOOL_STORE_ROUTE, navOptions)
 
 fun NavGraphBuilder.toolStoreScreen(
+    isVertical: Boolean,
     onNavigateToToolView: (username: String, toolId: String, preview: Boolean) -> Unit
 ) {
     composable(
-        route = TOOL_STORE_ROUTE
+        route = TOOL_STORE_ROUTE,
+        enterTransition = {
+            when (initialState.destination.route) {
+                TOOLS_ROUTE, STAR_ROUTE ->
+                    if (isVertical) slideInHorizontally(initialOffsetX = { fullWidth -> -fullWidth })
+                    else slideInVertically(initialOffsetY = { fullHeight -> -fullHeight })
+
+                else -> null
+            }
+        },
+        exitTransition = {
+            when (targetState.destination.route) {
+                TOOLS_ROUTE, STAR_ROUTE ->
+                    if (isVertical) slideOutHorizontally(targetOffsetX = { fullWidth -> -fullWidth })
+                    else slideOutVertically(targetOffsetY = { fullHeight -> -fullHeight })
+
+                else -> null
+            }
+        }
     ) {
         ToolStoreRoute(
             onNavigateToToolView = onNavigateToToolView

app/src/main/kotlin/top/fatweb/oxygen/toolbox/navigation/ToolsNavigation.kt

@@ -1,5 +1,9 @@
 package top.fatweb.oxygen.toolbox.navigation
 
+import androidx.compose.animation.slideInHorizontally
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutHorizontally
+import androidx.compose.animation.slideOutVertically
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.NavOptions
@@ -11,12 +15,39 @@ const val TOOLS_ROUTE = "tools_route"
 fun NavController.navigateToTools(navOptions: NavOptions) = navigate(TOOLS_ROUTE, navOptions)
 
 fun NavGraphBuilder.toolsScreen(
+    isVertical: Boolean,
     onShowSnackbar: suspend (message: String, action: String?) -> Boolean,
     onNavigateToToolView: (username: String, toolId: String, preview: Boolean) -> Unit,
     onNavigateToToolStore: () -> Unit
 ) {
     composable(
-        route = TOOLS_ROUTE
+        route = TOOLS_ROUTE,
+        enterTransition = {
+            when (initialState.destination.route) {
+                TOOL_STORE_ROUTE ->
+                    if (isVertical) slideInHorizontally(initialOffsetX = { fullWidth -> fullWidth })
+                    else slideInVertically(initialOffsetY = { fullHeight -> fullHeight })
+
+                STAR_ROUTE ->
+                    if (isVertical) slideInHorizontally(initialOffsetX = { fullWidth -> -fullWidth })
+                    else slideInVertically(initialOffsetY = { fullHeight -> -fullHeight })
+
+                else -> null
+            }
+        },
+        exitTransition = {
+            when (targetState.destination.route) {
+                TOOL_STORE_ROUTE ->
+                    if (isVertical) slideOutHorizontally(targetOffsetX = { fullWidth -> fullWidth })
+                    else slideOutVertically(targetOffsetY = { fullHeight -> fullHeight })
+
+                STAR_ROUTE ->
+                    if (isVertical) slideOutHorizontally(targetOffsetX = { fullWidth -> -fullWidth })
+                    else slideOutVertically(targetOffsetY = { fullHeight -> -fullHeight })
+
+                else -> null
+            }
+        }
     ) {
         ToolsRoute(
             onShowSnackbar = onShowSnackbar,

app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/OxygenApp.kt

@@ -173,7 +173,8 @@ fun OxygenApp(appState: OxygenAppState) {
                             startDestination = when (appState.launchPageConfig) {
                                 LaunchPageConfig.Tools -> TOOLS_ROUTE
                                 LaunchPageConfig.Star -> STAR_ROUTE
-                            }
+                            },
+                            isVertical = appState.shouldShowBottomBar
                         )
                     }
                 }