Add landing page burger menu

Added a burger menu to the landing page

6 files changed, 42 insertions, 19 deletions

diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index db3fbedd..759ebabe 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -19,6 +19,9 @@ $introduced-in-font-size: 13px;
 $h-margin-top: 20px;
 $h-margin-bottom: 10px;
 
+// Padding
+$nav-item-padding: 7px;
+
 // GitLab colors
 // Tanuki
 $color-tanuki-dark: rgb(226, 67, 41);
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index c86c1c76..1279b3d7 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,5 +1,5 @@
 ---
-version: 64
+version: 65
 ---
 
 @import "variables";
@@ -1231,6 +1231,7 @@ a.global-nav-link {
     z-index: 1000;
     position: fixed;
     width: 100%;
+    height: 57px;
     padding: 4px 24px;
     text-align: left;
     display: flex;
@@ -1238,7 +1239,7 @@ a.global-nav-link {
     align-items: center;
     white-space: nowrap;
     overflow: auto;
-    // font-size: 1.1em;
+    background-color: $landing-background;
     transition: .2s cubic-bezier(0, 0, 0, 1);
 
     a:hover {
@@ -1259,8 +1260,12 @@ a.global-nav-link {
       margin-right: auto;
     }
 
+    .nav-toggle-icon {
+      color: $white;
+    }
+
     .nav-item {
-      padding: 10px 18px;
+      padding: 0 $nav-item-padding;
       margin-right: 4px;
       text-align: center;
 
@@ -1308,7 +1313,6 @@ a.global-nav-link {
     li {
       display: inline-block;
       line-height: 20px;
-      margin: 0 10px;
       vertical-align: middle;
     }
 
@@ -1328,6 +1332,7 @@ a.global-nav-link {
     }
 
     .nav-container {
+      line-height: 1;
       margin: auto 0;
       display: flex;
     }
diff --git a/content/frontend/bundles/home.js b/content/frontend/bundles/home.js
new file mode 100644
index 00000000..286e6c57
--- /dev/null
+++ b/content/frontend/bundles/home.js
@@ -0,0 +1,8 @@
+document.addEventListener(
+  'DOMContentLoaded',
+  () => {
+    const navBar = document.getElementById('landing-header-bar');
+    const navToggle = document.getElementById('docs-nav-toggle');
+    navToggle.addEventListener('click', () => navBar.classList.toggle('active'));
+  }
+);
diff --git a/layouts/home.html b/layouts/home.html
index 9daafb06..afc50880 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -30,5 +30,6 @@
     <% end %>
     <%= render '/https_redirect.*' %>
     <%= render '/schema-microdata.*' %>
+    <script src="<%= @items['/frontend/bundles/home.*'].path %>"></script>
   </body>
 </html>
diff --git a/layouts/landing-header.html b/layouts/landing-header.html
index 54a9fba0..9bd24415 100644
--- a/layouts/landing-header.html
+++ b/layouts/landing-header.html
@@ -1,25 +1,26 @@
 <div class="landing-header-top" id="landing-header-bar">
-  <a class="header-link logo-container flex-container justify-center align-center" href="/">
+  <a class="header-link logo-container flex-container align-center" href="/">
     <img src="<%= @items['/assets/images/gitlab-logo.svg'].path %>" class="logo" />
     <p>GitLab <strong>Docs</strong></p>
   </a>
   <nav class="nav-container">
-    <% if ENV['NANOC_ENV'] == 'production' %>
-      <% @config[:products].each do |name, product| %>
-        <% if product[:expose] == true %>
-          <a class="header-link nav-item flex-container justify-center align-center" href="<%= @items["/#{product[:slug]}/#{product[:index_file]}"].path %>">
-            <p><%= product[:short_name] %></p>
-          </a>
+    <a class="nav-toggle" id="docs-nav-toggle">
+      <i class="fa fa-bars nav-toggle-icon mt-2" aria-hidden="true"></i>
+    </a>
+    <ul class="nav">
+      <% if ENV['NANOC_ENV'] == 'production' %>
+        <% @config[:products].each do |name, product| %>
+          <% if product[:expose] == true %>
+            <%= render '/nav-item.*', product: product %>
+          <% end %>
         <% end %>
-      <% end %>
-    <% else %>
-      <% @config[:products].each do |name, product| %>
-        <% if Dir.exist?("#{@config[:content_dir]}/#{product[:slug]}")%>
-          <a class="header-link nav-item flex-container justify-center align-center" href="<%= @items["/#{product[:slug]}/#{product[:index_file]}"].path %>">
-            <p><%= product[:short_name] %></p>
-          </a>
+      <% else %>
+        <% @config[:products].each do |name, product| %>
+          <% if Dir.exist?("#{@config[:content_dir]}/#{product[:slug]}")%>
+            <%= render '/nav-item.*', product: product %>
+          <% end %>
         <% end %>
       <% end %>
-    <% end %>
+    </ul>
   </nav>
 </div>
diff --git a/layouts/nav-item.html b/layouts/nav-item.html
new file mode 100644
index 00000000..44575abe
--- /dev/null
+++ b/layouts/nav-item.html
@@ -0,0 +1,5 @@
+<li class="nav-item">
+  <a class="header-link nav-item flex-container align-center" href="<%= @items["/#{product[:slug]}/#{product[:index_file]}"].path %>">
+  <p><%= product[:short_name] %></p>
+  </a>
+</li>