Add sticky header

[mboduroff]

Background

Currently, the header gets hidden if you scroll down, and users don't see which is the domain you have made the query for. To improve UX, you can make the header sticky - this way users can quickly see the current domain, or create a new query.

Acceptance criteria

1. No changes are made to the default header (that is available when your viewport is at the top of the page)
2. A horizontal line is added below the default header, to divide it from the rest of the page
3. A sticky header is implemented:
   3.1. It looks the same like the default header, but it has a different (higher contrast) background, so it's easily distinguishable from the rest of the page
   3.2. A smooth scrolling animation is added
   3.3. The sticky header components function the same way as in the default header: input field has the same validations, button has the same action
   3.4. If the logo is clicked, you are taken to the top of the page (no refresh)
   3.5. The sticky header is shown only once you have scrolled past the default header (the horizontal line from point 2 can be used as a reference)
   3.6. The sticky header is hidden once you have scrolled back to the top enough so the default header is starting to become visible
   3.7. The t shortcut does not take you to the top of the page if the sticky header is visible: instead it focuses the sticky header's search bar
   3.8. No functional or visual regressions are introduced

[github-actions]

🎉 This issue has been resolved in version 1.8.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀