As a user I want a header that is visible on both light and dark backgrounds
Description
The header component can be found in the layoutsModule. It's only added on the elewa-group-main-page.
To tackle this issue you'll need to add some dynamic classes to the header based on the active page, this classed will determine whether the header appears in light or dark mode. This logic should be done on the header component. Use Angular router to get active page, write a function that returns a class(es) based on page. Check on the full design linked below which pages have light header and dark header.
marcokumu
commented
1 year ago
Make the header dynamic (light & dark mode)
Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria
Summary
As a user I want a header that is visible on both light and dark backgrounds
Description
The header component can be found in the layoutsModule. It's only added on the elewa-group-main-page.
To tackle this issue you'll need to add some dynamic classes to the header based on the active page, this classed will determine whether the header appears in light or dark mode. This logic should be done on the header component. Use Angular router to get active page, write a function that returns a class(es) based on page. Check on the full design linked below which pages have light header and dark header.
The header needs to appear as shown below
Please take note of all the design features
Link to full design:
logo links
https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690297/elewa-group-website/Icons/SVG/_Logo/Logo_Black_cndtcl.svg
https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690297/elewa-group-website/Icons/SVG/_Logo/Logo_White_arvoyx.svg
Technical Analysis
This feature can be found in libs/elements/layout
Acceptance Criteria