Make the header dynamic (light & dark mode)
Closed this issue · 1 comments
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:
https://xd.adobe.com/view/7b72572b-b40a-4618-bfa6-5500ab28f13b-2e21/grid
logo links
Technical Analysis
This feature can be found in libs/elements/layout
Acceptance Criteria
- When rendered the component is pixel perfect compared to the design above.
- The component is clean and does not have more than 50 lines
- The component SCSS uses CSS variables for colour, font, ... Connected to the main style.scss
- The code is isolated to the libs/page/home package, unless a justified reason is specified.
- The component is aligned using CSS flex
- The design is responsive for screen, tablet and phone
- The image renders fast and has multiple srcsets
@IanOdhiambo9 kindly review