feat(header): update header component

6 files changed, 52 insertions, 107 deletions

diff --git a/layouts/cta.html b/layouts/cta.html
index b9cce835..54664e64 100644
--- a/layouts/cta.html
+++ b/layouts/cta.html
@@ -1,3 +1,3 @@
-<a class="btn btn-nav-cta" href="https://about.gitlab.com/free-trial/" target="_blank" rel="noopener noreferrer">
+<a class="btn btn-danger text-white mb-2 mb-lg-0" href="https://about.gitlab.com/free-trial/" target="_blank" rel="noopener noreferrer" role="button">
   Get free trial
 </a>
diff --git a/layouts/cta_omnibus.html b/layouts/cta_omnibus.html
index 2ff33d99..23a00fcd 100644
--- a/layouts/cta_omnibus.html
+++ b/layouts/cta_omnibus.html
@@ -1,3 +1,3 @@
-<a class="btn btn-nav-cta" href="https://about.gitlab.com/free-trial/self-managed/" target="_blank" rel="noopener noreferrer">
+<a class="btn btn-danger text-white mb-2 mb-lg-0" href="https://about.gitlab.com/free-trial/self-managed/" target="_blank" rel="noopener noreferrer" role="button">
   Get free trial
-</a>
+</a>
\ No newline at end of file
diff --git a/layouts/default.html b/layouts/default.html
index c636e864..69ff0243 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -34,7 +34,7 @@
           </div>
           <div class="row">
             <div class="col">
-              <div class="mt-5 mt-lg-0 mb-4 mb-lg-0">
+              <div class="mb-4 mb-lg-0">
               <a class="position-absolute text-muted mt-2 pt-1 text-decoration-none mobile-nav-toggle" href="#"><i class="fa fa-bars fa-lg" aria-hidden="true"></i> | </a>
               <%= render '/breadcrumbs.*' %>
               </div>
diff --git a/layouts/header.html b/layouts/header.html
index 5182fe98..0f5ea1fe 100644
--- a/layouts/header.html
+++ b/layouts/header.html
@@ -1,57 +1,53 @@
-<div class="header align-items-center px-3">
-  <div class="d-flex align-items-center py-1">
-    <a class="header-link logo-container d-flex justify-content-center align-items-center" href="/">
-      <img src="<%= @items['/assets/images/gitlab-logo.svg'].path %>" alt="GitLab logo" class="logo" />
-      <p><span class="header-company-name">GitLab </span><strong>Docs</strong></p>
-    </a>
-    <% if @item[:searchbar].nil? %>
-      <% unless @item.identifier.to_s.split('/')[1] == 'search' %>
-      <form id="search-form" action="/search/" method="get">
-        <input type="text" name="query" class="docsearch" placeholder="Search our docs" required/>
-        <input type="submit" style="visibility: hidden; position:absolute;" />
-      </form>
-      <% end %>
-    <% end %>
-  </div>
-  <div class="nav-container w-100 ml-4">
-    <a class="nav-toggle" id="docs-nav-toggle">
-      <i class="fa fa-bars text-white" aria-hidden="true"></i>
-    </a>
-    <ul class="nav align-items-center">
-      <li class="nav-item flex-grow-1">
-        <div class="d-flex align-items-center">
-          <%= render '/versions_dropdown.*' %>
-        </div>
+<nav class="navbar navbar-expand-lg navbar-dark py-lg-0">
+  <a class="navbar-brand d-flex align-items-center justify-content-center" href="/">
+    <img src="<%= @items['/assets/images/gitlab-logo.svg'].path %>" alt="GitLab logo" class="logo" />
+    <span class="d-none d-lg-block px-2">GitLab</span> <strong class="pl-2 pl-lg-0 pt-0">Docs</strong>
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item active">
+        <form class="form-inline my-2 my-lg-0">
+          <span class="fa fa-search form-control-feedback position-absolute ml-2 text-muted"></span>
+          <input class="form-control mr-sm-2 docsearch" type="search" placeholder="Search the docs..." aria-label="Search">
+        </form>
       </li>
-      <% if production? %>
-        <% @config[:products].each do |name, product| %>
-          <% if product[:expose] == true %>
-            <li class="nav-item">
-              <a href="<%= @items["/#{product[:slug]}/#{product[:index_file]}"].path %>">
-                <%= product[:short_name] %>
-              </a>
-            </li>
+    </ul>
+    <ul class="navbar-nav mr-0 mr-lg-3 my-2 my-lg-0">
+      <li class="nav-item dropdown">
+        <button class="btn dropdown-toggle text-white" type="button" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <%= version_dropdown_title %>
+        </button>
+        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+          <a class="dropdown-item" <%= active_dropdown(ENV['CI_DEFAULT_BRANCH']) %> href='<%= @item.identifier.without_ext + '.html' %>' class="versions-tooltip"><%= dotcom %>
+            <i class="fa fa-question-circle-o" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="Latest pre-release version of GitLab, with features available or about to become available on GitLab.com. For self-managed GitLab installations, select your version number as listed at your GitLab instance's /help URL."></i>
+          </a>
+          <% if display_previous_versions? %>
+          <!-- Start of online versions -->
+          <div class="dropdown-divider"></div>
+          <% data_versions[:online].each do |version| %>
+            <%= render '/partials/versions_list.*', version: version %>
           <% end %>
-        <% end %>
-      <% else %>
-        <% @config[:products].each do |name, product| %>
-          <% if Dir.exist?("#{@config[:content_dir]}/#{product[:slug]}")%>
-            <li class="nav-item">
-              <a href="<%= @items["/#{product[:slug]}/#{product[:index_file]}"].path %>">
-                <%= product[:short_name] %>
-              </a>
-            </li>
+          <!-- End of online versions -->
+    
+          <!-- Start of last major versions -->
+          <div class="dropdown-divider"></div>
+          <% data_versions[:previous_majors].each do |version| %>
+            <%= render '/partials/versions_list.*', version: version %>
           <% end %>
+          <!-- End of last major versions -->
         <% end %>
-      <% end %>
-      <li class="nav-item">
-        <!-- Check if the path is /omnibus and show a different CTA -->
-        <% if @item.identifier.to_s.split('/')[1] == 'omnibus' %>
-          <%= render '/cta_omnibus.*' %>
-        <% else %>
-          <%= render '/cta.*' %>
-        <% end %>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" <%= active_dropdown('archives') %> href='/archives/'>Archives</a>
+        </div>
       </li>
     </ul>
+    <% if @item.identifier.to_s.split('/')[1] == 'omnibus' %>
+    <%= render '/cta_omnibus.*' %>
+    <% else %>
+      <%= render '/cta.*' %>
+    <% end %>
   </div>
-</div>
+</nav>
diff --git a/layouts/partials/versions_list.html b/layouts/partials/versions_list.html
index 549f1d13..d35023e7 100644
--- a/layouts/partials/versions_list.html
+++ b/layouts/partials/versions_list.html
@@ -6,15 +6,11 @@
      contains all current versions and offline archives.
 -->
 <% if archives? %>
-<li>
-  <a href='/archives/'>
+  <a class="dropdown-item" href='/archives/'>
     <%= version %>
   </a>
-</li>
 <% else %>
-<li>
-  <a<%= active_dropdown(version) %> href='/<%= version %><%= @item.identifier.without_ext + '.html' %>'>
+  <a class="dropdown-item" <%= active_dropdown(version) %> href='/<%= version %><%= @item.identifier.without_ext + '.html' %>'>
     <%= version %>
   </a>
-</li>
 <% end %>
diff --git a/layouts/versions_dropdown.html b/layouts/versions_dropdown.html
deleted file mode 100644
index 74fac920..00000000
--- a/layouts/versions_dropdown.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!-- versions dropdown-->
-<div class="choose-version">Version</div>
-
-<div class="dropdown">
-  <a role="button" class="btn btn-versions dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="versions" href="#">
-    <!--
-      Name the label dropdown after the release version so that you know
-      which version you're browsing. For `/archives` show 'Archives' since
-      they're supposed to be versionless.
-      If we build on the default and stable branches (versions), show the following
-      name in the drodown menu:
-        - GitLab.com if the default branch.
-        - The branch name otherwise.
-      For local development and review apps, show "Versions".
-    -->
-    <%= version_dropdown_title %>
-
-    <span class="caret"></span>
-  </a>
-  <ul class="dropdown-menu versions-menu" aria-labelledby="versions">
-    <li>
-      <a<%= active_dropdown(ENV['CI_DEFAULT_BRANCH']) %> href='<%= @item.identifier.without_ext + '.html' %>' class="versions-tooltip"><%= dotcom %>
-        <i class="fa fa-question-circle-o" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="Latest pre-release version of GitLab, with features available or about to become available on GitLab.com. For self-managed GitLab installations, select your version number as listed at your GitLab instance's /help URL."></i>
-      </a>
-    </li>
-
-    <% if display_previous_versions? %>
-      <!-- Start of online versions -->
-      <li class="dropdown-divider"></li>
-      <% data_versions[:online].each do |version| %>
-        <%= render '/partials/versions_list.*', version: version %>
-      <% end %>
-      <!-- End of online versions -->
-
-      <!-- Start of last major versions -->
-      <li class="dropdown-divider"></li>
-      <% data_versions[:previous_majors].each do |version| %>
-        <%= render '/partials/versions_list.*', version: version %>
-      <% end %>
-      <!-- End of last major versions -->
-    <% end %>
-
-    <li class="dropdown-divider"></li>
-    <li><a<%= active_dropdown('archives') %> href='/archives/'>Archives</a></li>
-  </ul>
-</div>
-<!-- versions dropdown-->