mozilla-vpn-client icon indicating copy to clipboard operation
mozilla-vpn-client copied to clipboard

Implement navigation using navigation tab bar

Open data-sync-user opened this issue 3 years ago • 0 comments
trafficstars

This task is to hook up navigation to the newly created custom navigation tab bar so that the user can navigate to the home screen, in-app messages, and settings

Design spec: https://www.figma.com/file/Disx2dX7tw81NQIN39BrYo/In-app-Messaging?node-id=2%3A531

Acceptance criteria:

  • The tab bar should have 3 tabs - Home, Messages, and Settings, which, when selected, should take the user to the respective screen
    • Each button should have its own navigation stack, and navigation stack view order should be remembered when switching between tabs.
      • For example, if the user goes from settings tab (settings home page) > network settings > home tab > back to settings tab, the settings tab should still be showing the network settings, and should not have popped the stack back to the root view
    • Navigation stacks for each tab are reset when the app is closed / quit, and the home tab is shown on open (this does not including sending the app the background)
    • Deep link to other tab stacks when necessary
      • E.g. If a user selects “Discover now” on the tips and tricks intro modal, presented while on the home tab, it will deep link them into the tips and tricks page with the settings tab selected. Clicking back from here will take them back into the settings menu
    • Double clicking on a nav bar tab will undwind the stack back to the root view
  • The settings button should be removed from the VPN Toggle view
  • The connection info / speed test button should be moved to where the settings button used to be on the VPN Toggle view (top-right corner)
  • No animation/transition when selecting a tab
  • [Dev only] Functional tests

┆Issue is synchronized with this Jira Task ┆author: Matt Lichtenstein

data-sync-user avatar Jul 07 '22 14:07 data-sync-user