Kuwait Comp: Bottom Navbar

[FaithDaka]

PR Checklist

• PR title descriptive (can be used in release notes)

Description

Includes a dynamic navigation bar component for the Kuwait app.

Git Issues

Closes #

Screenshots/Videos

[FaithDaka]

@chrismclarke @jfmcquade

I have a few things I want to achieve in this PR:

1. Creating a new layout component for the Kuwait theme. Given that the design doesn't have a static header, footer, margins or padding, there's need to destructure the layout defined in app.component.html. I created a plh_kids_kw folder within the packages/components in order for it to have a dedicated module.
   I don't know if I'm better off creating a new skin or if we can explore this option?
2. Routing to the 3 pages represented by the navbar items. For the debug app I wanted a new footer where the home button mapped to the theme page, library button mapped to the templates page and settings button mapped to the side-menu items. Is that reasonable?
3. The actual navbar design.

Item 3 has been done (with some static styling). It's 1 and 2 that are a WIP and need insights

[chrismclarke]

@chrismclarke @jfmcquade

I have a few things I want to achieve in this PR:

1. Creating a new layout component for the Kuwait theme. Given that the design doesn't have a static header, footer, margins or padding, there's need to destructure the layout defined in app.component.html. I created a plh_kids_kw folder within the packages/components in order for it to have a dedicated module.
   I don't know if I'm better off creating a new skin or if we can explore this option?
2. Routing to the 3 pages represented by the navbar items. For the debug app I wanted a new footer where the home button mapped to the theme page, library button mapped to the templates page and settings button mapped to the side-menu items. Is that reasonable?
3. The actual navbar design.

Item 3 has been done (with some static styling). It's 1 and 2 that are a WIP and need insights

Thanks Faith, all sounds like good options to have at the core app layout level.

Am I right in thinking that only the main section would have routing included and the other two sections single templates? If so it may be worth considering using something like a slider/modals/overlays to display the section content so that a user will always be returned to the same place when resuming main section (it never actually is removed from the dom). This wouldn't really work if the other sections were routable, in which case we could still look into using angular child routers.

Remind me @jfmcquade how we've handled bottom navbars in the past and whether we've had a similar use case?

[jfmcquade]

Apologies, I've not had time to properly engage with this fully, but I think your plan sounds good, @FaithDaka

Remind me @jfmcquade how we've handled bottom navbars in the past and whether we've had a similar use case?

I believe we have one way to configure a footer: via the APP_FOOTER_DEFAULTS.templateName parameter, which can be set either in a deployment config or in a skin. Then the convention has been to use a specially designed component, navigation_bar within the template whose name gets passed to that property. The navigation_bar component itself does not contain any specific features that make it act as a footer to the app, that's all handled by the core app code, which displays any template that is passed within an ion-footer element defined within the app component template.

Since the footer is applied at the deployment config/skin level, we don't currently have any functionality for displaying a footer on some pages and not others.

[github-actions]

Visit the preview URL for this PR (updated for commit 6a56b7e):

https://plh-teens-app1--pr2508-feat-bottom-nav-l3cgh4h9.web.app

_{(expires Fri, 06 Dec 2024 04:52:17 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: e4c0bab6b08dd290fbf002fd6e07987fa4b5fce1}

[esmeetewinkel]

To feed into the discussion (but please ignore if this is out of the scope of this PR):

Also the PLH Kids TZ deployment would like to have a white styling of the footer (as an alternative to the current primary colour default), see ParentingForLifelongHealth/plh-kids-app-tz-content#135. The design is very similar to the design for Kuwait - so it would be handy for me if this styling would also be accessible to other themes and would be vaguely in-line with the current footer authoring.

[jfmcquade]

Hi @FaithDaka.

Following on from our discussion this week:

• We will independently implement the ability to configure the header and footer through exposing template-level authored parameters. Therefore:
  • The layout component can be removed,
  • The kw specific module and routing module can be removed
• This PR can therefore consist of a new navbar component that can be configured to show inside the footer independently.
  • I think the component can live at the plh folder level, and the plh-kids-kw folder can be removed
  • The navbar component should be able to handle up to four buttons. That way it can be used for the FacilitatorApp navbar too.
  • The navbar component should be able to handle the case of no button label text being provided, and display the icons with sensible styling in this case

[chrismclarke]

Just to quickly add that the work for the navbar template override is currently open as #2531, hopefully should be merged at some point next week pending some minor review changes