diff --git a/documentation/assets/navigation/cake-app-tree.png b/documentation/assets/navigation/cake-app-tree.png new file mode 100644 index 000000000..461153cc1 Binary files /dev/null and b/documentation/assets/navigation/cake-app-tree.png differ diff --git a/documentation/assets/navigation/sample-app.png b/documentation/assets/navigation/sample-app.png new file mode 100644 index 000000000..76d936034 Binary files /dev/null and b/documentation/assets/navigation/sample-app.png differ diff --git a/documentation/assets/navigation/tree-animated.gif b/documentation/assets/navigation/tree-animated.gif new file mode 100644 index 000000000..7c199048f Binary files /dev/null and b/documentation/assets/navigation/tree-animated.gif differ diff --git a/documentation/navigation/index.md b/documentation/navigation/index.md index 98beb3457..b291f63cb 100644 --- a/documentation/navigation/index.md +++ b/documentation/navigation/index.md @@ -10,7 +10,27 @@ title: Appyx Navigation โ€“ Overview - Leverages the transitions and gesture-based capabilities of [Appyx Interactions](../interactions/index.md) to build beautiful, custom navigation. - Use any component for navigation, whether pre-built ([Appyx Components](../components/index.md)), or custom-built by you ([Appyx Interactions](../interactions/index.md)). - + + +## Sample app + +{{ + compose_mpp_sample( + project_output_directory="demos/appyx-navigation/web/build/dist/js/productionExecutable", + compile_task=":demos:appyx-navigation:web:jsBrowserDistribution", + width=512, + height=500, + target_directory="samples/documentation-appyx-navigation", + html_file_name="index.html", + classname="compose_mpp_sample_app", + ) +}} + +The above is an interactive example for **Appyx Navigation**. You can play with it right here in the browser (try it!). You can of course launch it on mobile and desktop too. + +For more info and points of interest, make sure to check out: + +[ยป Sample app](sample-app.md) ## Quick start diff --git a/documentation/navigation/sample-app.md b/documentation/navigation/sample-app.md new file mode 100644 index 000000000..8e3229a61 --- /dev/null +++ b/documentation/navigation/sample-app.md @@ -0,0 +1,107 @@ +--- +title: Appyx Navigation โ€“ Sample app +--- + +# Appyx Navigation โ€“ Sample app + +{{ + compose_mpp_sample( + project_output_directory="demos/appyx-navigation/web/build/dist/js/productionExecutable", + compile_task=":demos:appyx-navigation:web:jsBrowserDistribution", + width=512, + height=500, + target_directory="samples/documentation-appyx-navigation", + html_file_name="index.html", + classname="compose_mpp_sample_app", + ) +}} + +You can try out the app right here in the browser. The above example is interactive! + + +## Multiplatform + +![Overview](/appyx/assets/navigation/sample-app.png) + +Check out the `:demos:appyx-navigation` module in the project (see on [GitHub](https://github.com/bumble-tech/appyx/tree/2.x/demos/appyx-navigation)) to launch platform-specific variants. + + +## Points of interest + +You can experiment with the following in the sample app: + +### Gestures & transitions + +- Swipe left-right in the cake pager +- Tap on any cake to enter or exit hero mode +- Swipe left-right while in hero mode +- Swipe up-down between hero and list mode for a gradual transition + + +### Remote triggered transitions + +**In the app**: + +- Go to Home, tap the `Go to a random cake` button + + +**Trigger via deep link (basic)**: + +- Android: `adb shell am start -a "android.intent.action.VIEW" -d "appyx://randomcake"` +- iOS: `xcrun simctl openurl booted 'appyx://randomcake'` + + +**Trigger via deep link (advanced, waits for user to finish logging in)**: + +1. Go to `Profile` in the bottom menu, tap `Log out` +2. Close the app +3. Trigger the deep link + - Android: `adb shell am start -a "android.intent.action.VIEW" -d "appyx://randomcake-wait"` + - iOS: `xcrun simctl openurl booted 'appyx://randomcake-wait'` +4. Tap `Log in` and see the deep link action resume + + +### Scoped dependencies + + + +The cart object lives inside the `MainNode`. It's the same instance passed to all child nodes in the tree, but is destroyed when logging out and logging back in. Try: + +- Add items to cart, log out from `Profile`, log back in +- Add items to cart, go to checkout, manipulate cart, finish checkout flow + + +### Other + +- Resize window (desktop or standalone launched web) to see the Material 3 Navigation Bar automatically switches to a Navigation Rail depending on screen size. + + +## Relevant pages from the documentation + +### Concepts + +Topics on how the sample app is put together, and how navigation works in it: + +- [Model-driven navigation](concepts/model-driven-navigation.md) +- [Composable navigation](concepts/composable-navigation.md) +- [Implicit navigation](concepts/implicit-navigation.md) +- [Explicit navigation](concepts/explicit-navigation.md) + +### Features + +Library features used in the app: + +- [Deep link navigation](features/deep-linking.md) +- [Material 3 support](features/material3.md) +- [Scoped DI](features/scoped-di.md) +- [Surviving configuration changes](features/surviving-configuration-changes.md) + + +### What's behind the custom component + +The cake slider / hero transition is a custom component. Check these out on how it's put together: + +- [Code](https://github.com/bumble-tech/appyx/tree/2.x/demos/appyx-navigation/common/src/commonMain/kotlin/com/bumble/appyx/navigation/component/spotlighthero) +- [Appyx Interactions intro](../interactions/index.md) +- [Creating custom components with Appyx Interactions](../interactions/appyxcomponent.md) + diff --git a/mkdocs.yml b/mkdocs.yml index e52dbd5f9..b241d2006 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -19,6 +19,7 @@ nav: - Home: index.md - Appyx Navigation: - Overview: navigation/index.md + - Sample app: navigation/sample-app.md - Quick start guide: navigation/quick-start.md - Concepts: - Model-driven navigation: navigation/concepts/model-driven-navigation.md