Header Component

[lekankoku]

The header is a component that is used on all pages, hence we decided to componentize it via HTML Web Components Acceptance Criteria

• The header should scale according to web view
• The Mobile side should be function via javascript

Wireframe

[lekankoku]

@oxySmith @li-btu there was no color specified for the nav links, am I allowed to choose the color or if not what color code is this(the home text) ?

[lekankoku]

@oxySmith @li-btu is it also necessary to have the black separators separating the links?

[li-btu]

@lakeside213 You may use white color for the nav links, and a light yellow color of your choice when hovered. The separators are not necessary.

Our base color is orange(#F38D3F) and accent color is light yellow. Other than these colors you can use white and shades of grey.

[lekankoku]

@li-btu @oxySmith i've been able to implement a prototype of the header, can you pull the current develop branch and check it out on the index.html page and give me a review.

NB:check out the mobile view as well

[li-btu]

@lakeside213 It would be better if you could keep a minimum distance between each word when the browser size is squeezed.

[lekankoku]

@li-btu i've fixed that by using a media query which starts from that screen width, pull the latest changes

@lakeside213 It would be better if you could keep a minimum distance between each word when the browser size is squeezed.

[lekankoku]

In closing are you @li-btu @oxySmith satisfied with the header ?

[li-btu]

@lakeside213 It looks nice. There are only some minor things to improve.

1. The texts on the navigation bar in the mobile version currently do not change color when hovered. Please change its color to light yellow when hovered and underline the page the user is currently on.
2. When the brand name or logo is clicked, it should redirect to the home page.

[lekankoku]

1. There are no hover events for mobile(you literally can only click and long press on mobiles)

[li-btu]

Regarding #1, sorry, I mean the desktop version when the browser is small enough

[lekankoku]

i've fixed the issues can you check the develop branch again @li-btu

[li-btu]

Looks good now. Thanks