feat: header config: 'collapse', 'compact, and 'colour' options

PR Checklist

[x] PR title descriptive (can be used in release notes)

Description

Adds 3 new options for styling the main app header: "collapse", "compact", and "colour". These are exposed at the app config level (as part of the APP_HEADER_DEFAULTS object), so can be set in a deployment config or a skin.

	collapse	variant	colour
Possible values	boolean	"default", "compact"	"primary", "secondary", "none"
Default value	false	"default"	"primary"
Effect	If true, the header will appear/reappear on scroll	If `compact`, a narrower version of the header is used, with no title	Sets the background colour of the header. As well as setting the header colour to match the page background, "none" also removes the shadow, for a flat look.

See demos below.

Also refactors the drawer component, which would otherwise be broken by this functionality. This refactor should fix at least some of the issues in #1617

Testing

In order to test each setting, set its value in the debug deployment config, e.g.:

config.app_config.APP_HEADER_DEFAULTS.collapse = true;
config.app_config.APP_HEADER_DEFAULTS.variant ="compact";
config.app_config.APP_HEADER_DEFAULTS.colour = "primary";

Then run yarn workflow deployment set debug to recompile the config file, before running yarn start. I think you'll need to stop the app running and start it again after each time you apply any changes to the config.

The drawer component does now work as expected even when there is no footer, but you may want to test the interaction of the drawer with the footer, in which cases, use:

config.app_config.APP_FOOTER_DEFAULTS.templateName = "feat_footer"

to target the new feat_footer template.

Git Issues

Closes #2154

Screenshots/Videos

1

collapse	variant	colour
true	"default" (or not set)	"primary" (or not set)

https://github.com/IDEMSInternational/parenting-app-ui/assets/64838927/424f0411-192f-4cb5-81f9-a41ed08feb70

2

collapse	variant	colour
true	"compact"	"secondary"

https://github.com/IDEMSInternational/parenting-app-ui/assets/64838927/947d8581-e8d8-4a7a-8155-79115c77dbda

3

collapse	variant	colour	Theme
true	"compact"	"none"	Professional

https://github.com/IDEMSInternational/parenting-app-ui/assets/64838927/9e92a85f-f6d3-40d2-9fe5-6155ea8f3fbb

Interaction with drawer and footer:

comp_drawer

collapse	variant	colour
true	"compact"	"primary"

https://github.com/IDEMSInternational/parenting-app-ui/assets/64838927/c0bf8cec-e49a-44aa-9ee9-20606de6898a

IDEMSInternational / open-app-builder