Add JavaScript for toggling the header.

2 files changed, 14 insertions, 10 deletions

diff --git a/layouts/head.html b/layouts/head.html
index 2a426968..aa36d9a9 100644
--- a/layouts/head.html
+++ b/layouts/head.html
@@ -4,6 +4,7 @@
   <meta name="description" content="Documentation for GitLab Community Edition, GitLab Enterprise Edition, Omnibus GitLab, and GitLab Runner.">
   <link rel="stylesheet" href="<%= @items['/assets/stylesheets/stylesheet.*'].path %>">
   <link rel="stylesheet" href="<%= @items['/assets/stylesheets/highlight.*'].path %>">
+  <script async src="<%= @items['/assets/javascripts/docs.*'].path %>"></script>
   <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,400italic' rel='stylesheet' type='text/css'>
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 
diff --git a/layouts/header.html b/layouts/header.html
index bce9e95a..49b511ff 100644
--- a/layouts/header.html
+++ b/layouts/header.html
@@ -3,14 +3,17 @@
     <img src="<%= @items['/assets/images/gitlab-logo.svg'].path %>"/>
     <p>GitLab Documentation</p>
   </a>
-  <ul>
-    <li><input type="text" class="st-default-search-input" placeholder="Search"></li>
-    <% @config[:products].each do |name, product| %>
-      <li>
-        <a href="<%= @items["/#{product[:slug]}/#{product[:index_file]}"].path %>">
-          <%= product[:short_name] %>
-        </a>
-      </li>
-    <% end %>
-  </ul>
+  <div class="nav-container">
+    <a class="nav-toggle" id="docs-nav-toggle">Menu</a>
+    <ul class="nav">
+      <li class="search"><input type="text" class="st-default-search-input" placeholder="Search"></li>
+      <% @config[:products].each do |name, product| %>
+        <li class="nav-item">
+          <a href="<%= @items["/#{product[:slug]}/#{product[:index_file]}"].path %>">
+            <%= product[:short_name] %>
+          </a>
+        </li>
+      <% end %>
+    </ul>
+  </div>
 </div>