Issue 5385 - Create Site Header Component for Help Center

includes/layout/header.tmpl

Index: includes/layout/header.tmpl
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/layout/header.tmpl
@@ -0,0 +1,21 @@
+<header id="site-header" class="navbar">
+  <div class="navbar-wrapper">

[juliandoucette, 2017/08/23 14:39:02]

See comment
[here](https://codereview.adblockplus.org/29485575/diff/29523654/static/scss/base/_variables.scss#newcode68)

[ire, 2017/08/25 08:27:05]

Acknowledged.

+    <h1 class="site-title">
+      {{ "index" | linkify() }}

[juliandoucette, 2017/08/23 14:39:03]

See comment
[here](https://codereview.adblockplus.org/29485575/diff/29523654/static/scss/layout/_header.scss#newcode24)

[ire, 2017/08/25 08:27:06]

Acknowledged.

+        <img src="/img/png/eyeo-help.png" srcset="/img/svg/eyeo-help.svg 2x" alt="{{ "eyeo Help" | translate("site-title", "Image alt text") }}">
+      </a>
+    </h1>
+    <button id="toggle-search-form" class="unstyled tablet-and-mobile-only">
+      <img src="/img/png/search-icon.png" srcset="/img/svg/search-icon.svg 2x" alt="{{ "Toggle Search Bar" | translate("search-toggle-alt", "Image alt text") }}">
+    </button>
+    <div id="site-search">

[juliandoucette, 2017/08/23 14:39:02]

I think that it's kindof confusing that this element has an ID "site-search" and
contains a nav that is not part of the "search" ~area on desktop. I think that
the purpose of this element is to contain children that are collapsed on
mobile/tablet. If that is the case, why not make it more generic e.g.
`.navbar-collapse` (or equivilant) (our navbars on other websites will also have
elements that collapse like this).

[ire, 2017/08/25 08:27:06]

Done.

+      <? include search-form ?>

[juliandoucette, 2017/08/23 14:39:03]

It seems inconsistent that this form is an include and the nav below is not. I
would suggest that this form should only be an include if it appears elsewhere
outside of the header.

[ire, 2017/08/25 08:27:05]

Done.

+      <nav id="product-website-link">
+        <a href="https://adblockplus.org/">
+          {{ "Adblock Plus" | translate("abp-product-link", "Link") }}

[juliandoucette, 2017/08/23 14:39:03]

NIT/Suggest: "Link text" or "Link label" (it's not a URL)

[ire, 2017/08/25 08:27:05]

Done.

+          <img src="/img/png/external-icon.png" srcset="/img/svg/external-icon.svg 2x" alt="{{ "External link icon" | translate("external-link-icon", "Image alt text") }}">
+        </a>
+      </nav>
+    </div>
+  </div>
+</header>