Vocabulary: Update the header component

[panchovm]

Description

We updated the header component by eliminating the big header and small header and replacing them with one header per breakpoint. Since breakpoints are Bulma's breakpoints, the components we need to use are:

1. Fullhd breakpoint = Fullhd header
2. Widescreen breakpoint = Desktop header
3. Desktop breakpoint = Desktop header
4. Tablet breakpoint = Tablet header
5. Mobile breakpoint = Mobile header

Secondary navigation

The explore cc action works as it currently is, but for donate and locale buttons, the hover mockup shows the hover state of each element.

Mobile header

Since the menu appears over the page, I would like you all opinions about the interaction. I am thinking of two options:

1. The menu uses the whole screen and adjusts its height depending on the device. This means it will have an internal scroll.
2. Or the menu expands and collapses the page and follows the scroll of the page.

[chidexebere]

I can take this/

[dhruvkb]

@panchovm the screenshot shows the 'Donate button' has a plain heart icon instead of the CC heart icon. Is that intentional or accidental?

[panchovm]

Intentional. It is a button only for this component. I thought it wasn't necessarily a ticket to add it as a component. What do you think?

[chidexebere]

Since we are merging the big and small header into one header, what happens to the compact header?. Should that be eliminated too?

[zackkrida]

@chidexebere compact header is still used by the cc search browser extension; we should keep it.

[chidexebere]

Intentional. It is a button only for this component. I thought it wasn't necessarily a ticket to add it as a component. What do you think?

@panchovm, @dhruvkb , this means a plain heart icon will be added to the font library. I will just go ahead and use the CC heart icon in its place, right ?

[dhruvkb]

@chidexebere please open an issue in creativecommons/fonts about this and link it to this issue. In the meantime, till that issue is resolved, you can use the CC heart icon as a placeholder.

[chidexebere]

Okay will use CC heart icon until #144 is fixed

[panchovm]

Sorry! I forgot to create a ticket for adding the heart icon. I already added it to the Design Library and updated the header component.

[zackkrida]

Hi @chidexebere, I wanted to check in. Are you actively working on this? Totally okay if you're not anymore.

If you are, feel free to make a _draft pull request_ so people can give you feedback. Thanks!

[chidexebere]

Hey @zackkrida , I am still working on this. Took a little break from it because of some issues blocking it. It is still being blocked by #628

[zackkrida]

Cool @chidexebere! I'll get the heart icon in today.

[chidexebere]

Hey @obulat, please I could not use the new heart icon. Wanted to use it on the donate button for the new header component, its not displaying

[dhruvkb]

@chidexebere did you check the associated version of Fonts? The heart icon was added in the new release.

[chidexebere]

@dhruvkb thanks, I did not know I needed to bump up the version imported into vocabulary

[dhruvkb]

@chidexebere we are planning to switch Fonts into an SVG based library and with it we will change the hardcoded import into an npm dependency. That should prevent such bugs from occurring in the future.