Display Bottom Navigation Bar in PWA

[davidmoore1]

[davidmoore1]

This comment is to document the basic functionality requirements of the bottom navigation bar.
The bar is configured in SAB/ Navigation/ Bottom Navigation section. It can have no more than 5 buttons (at this time). If no buttons are configured, the bar never displays The bar displays in the text window at the bottom of the screen, below audio bar.
It displays when the text window is scrolled up and disappears when the window is scrolled down. It is hidden when text is selected and remains hidden until there is no selection It always displays when in Content menu screens It always displays when in the Reading Plans screen on the initial tab that shows current, available and completed plans tabs Button types: Contents button: If configured with a screen title, then that screen is displayed with a back button that will take it to the top content screen. This includes if the selected title is the first screen. If no title is configured, then go to the top Contents screen. Scripture button - No link configured - Check to see if "current book" has been saved. If so, go to that book collection and book, chapter 1. Clear saved current book information. If no book has been saved, go to the current text without moving. Scripture button - Link configured - Save the current book collection and book. Go to the book collection and book specified in the link, chapter 1. Plan button - Go to the initial plan selection tab.
Search - Go to the search screen Settings - Go to the settings popup screen About - Go to the About screen For content, Bible and plan buttons, bold the first button that matches the type. So if on the content screen, make the first content button defined "selected" by showing in bold. At least at this point, it is not attempting to match the actual button that was pressed to get you to that location. So if in text, change the first Bible button to "selected". In Plans, show the Plans button as selected. The bar does not appear for any of the other button types so they never appear as selected. Depending on how this bar is displayed, it may affect how you want to handle animations between contents, text and plans. In the case of iOS, I eliminated animations between these screens so it appears the bar is always there and is not moving in with the page. That is always what Android does.

The text that appears with the icon on the button is configured for each button and can have translations to match each defined interface language. So any time the language changes, the bar needs to be updated with the correct captions for that language.