Issue 6237 - Implement wd navbar component in help.eyeo.com

includes/layout/header.tmpl

Index: includes/layout/header.tmpl
===================================================================
--- a/includes/layout/header.tmpl
+++ b/includes/layout/header.tmpl
@@ -3,39 +3,37 @@
   {% set search_label = "Search " + product.full_name + " Help" %}
   {% set search_site = config.get("general", "siteurl") + "," + product.url %}
 {% else %}
   {% set search_label = "Search for help..." %}
   {% set search_site = config.get("general", "siteurl") %}
 {% endif %}
 
 <header id="site-header" class="navbar {{ 'site-header-minimal' if product_id is not defined }}">
-  <div class="container large-desktop-width">
-    <h1 id="site-title">
-      {{ "index" | linkify() }}
-        <img src="/dist/img/png/eyeo-help.png" srcset="/dist/img/svg/eyeo-help.svg 2x" alt="{{ "eyeo Help" | translate("site-title", "Image alt text") }}" height="30" width="205">
-      </a>
-    </h1>
+  <div class="navbar-container large-desktop-width">
+    {{ "index" | linkify(class="navbar-branding float-start") }}
+      <img src="/dist/img/png/eyeo-help.png" srcset="/dist/img/svg/eyeo-help.svg 2x" alt="{{ "eyeo Help" | translate("site-title", "Image alt text") }}" height="30" width="205">
+    </a>
 
-    <button class="toggle-navbar-collapse unstyled phablet-and-mobile-only">
+    <button class="toggle-navbar-collapse float-end button-link">
       <img src="/dist/img/png/search-icon.png" srcset="/dist/img/svg/search-icon.svg 2x" alt="{{ "Toggle Search Bar" | translate("search-toggle-alt", "Image alt text") }}">
     </button>
 
     <div class="navbar-collapse">
       <form id="search-form" action="https://duckduckgo.com" method="GET">
         <label for="search" class="sr-only">{{ search_label | translate("search-form-label", "Input label") }}</label>
         <input id="search" name="q" type="search" placeholder="{{ search_label | translate("search-form-label", "Input label") }}">
         <input type="hidden" name="sites" value="{{ search_site }}">
         <button type="submit">
           <img src="/dist/img/png/search-icon.png" srcset="/dist/img/svg/search-icon.svg 2x" alt="{{ "Search" | translate("search-icon-alt", "Image alt text") }}">
         </button>
       </form>
 
       {% if product_id %}
-      <nav id="product-website-link">
+      <nav id="product-website-link" class="float-end">
         <a href="{{ product.url }}">
           {{ product.full_name | translate(product_id+"-product-link", "Link label") }}<img src="/dist/img/png/external-icon.png" srcset="/dist/img/svg/external-icon.svg 2x" alt="{{ "External link icon" | translate("external-link-icon", "Image alt text") }}">
         </a>
       </nav>
       {% endif %}
     </div>
   </div>
 </header>