Header component (fixes #9)

[stanislawK]

Run app.
Go to http://localhost:8080/.
Navbar should appear on top.
Try to click elements of navbar, and check if they navigate to correct page elements.
Check mobile view - navar should be vertical

[Bosmanfrx]

Just some nitpicking, but generally LGTM

[OtisRed]

Otherwise I'm cool, but the navbar doesn't seem to be coded for mobile view so most of the comments apply to that problem.

[OtisRed]

Some questions not necessarily for this PR

[OtisRed]

When I saw that I first thought that we've already have defined breakpoints in scss/breakpoints.scss but it didn't work when I exchangaged "768px" for "$phone" variable. Then @Bosmanfrx enlightened me that usually there are two sets of mirrored breakpoints one for css and one for js, which made me realize it is sort of obvious why css variable doesn't make js do what I want. But still having two sets of breakpoints seems not necessary so I looked for the ways of using css breakpoint in js.

Here's interesting solution I found
https://gomakethings.com/the-easy-way-to-manage-css-breakpoints-in-javascript/

As noted, this is beyond this PR but we could think of applying this solution for some other task?
EDIT: after talking with @stanislawK we can also use vuetify grid and e.g. and import its breakpoint values in scss as (at least as far as I'm concerned) the explicit definitions are needed in scss to code media query properly

[OtisRed]

@MargoWM @w1stler @Loczi94 @Bosmanfrx @magul see the comments above. In your aesthetic opinion the items in mobile view should be centered (the imageor adjusted to the left?

To the left:

Centered (there's a slight lean to the left in this picture but it's been fixed now):

Please merge after satysfying conclusion

[MargoWM]

For me, the better option is the second one. I prefer symmetry.