Issue 5385 - Create Site Header Component for Help Center

static/js/main.js

 (function(){
   document.addEventListener("DOMContentLoaded", function()
   {
 
     // Change html class name from "no-js" to "js"
     document.documentElement.className = "js";
-    
-    document.getElementById('toggle-search-form').addEventListener('click', function(e) {

[juliandoucette, 2017/08/18 15:03:56]

NIT: This doesn't seem to fit on one line.

[ire, 2017/08/21 15:23:20]

Is it supposed to? That depends on the size of the IDE being used. 

[juliandoucette, 2017/08/21 16:28:40]

We follow Mozilla's rule regarding the line length of JavaScript.

https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Coding_Style...

The same rules do not apply to HTML.

[ire, 2017/08/22 12:15:15]

Okay. I will switch to your style of new lines then. 

-      e.preventDefault();
-      document.getElementById('site-search').classList.toggle('open');

[juliandoucette, 2017/08/18 15:03:56]

NIT: I usually chain on newlines e.g.

document
  .getElementById(...)
  .classList.toggle(...)

But I don't think our code style guide says anything about this. So it's
up-to-you.

[juliandoucette, 2017/08/18 15:03:56]

NIT: Our code style specifies double quotes :( (I like single quotes)

[ire, 2017/08/21 15:23:20]

Okay. I like to use new lines like that for things like Promises. But for a line
that's as short as this one I prefer one line.

[ire, 2017/08/21 15:23:20]

Done.

-    }, false);
+
+    // Toggle Navbar Collapse
+    function toggleNavbarCollapse()
+    {
+      var navbarCollapseEls = this.parentElement.getElementsByClassName("navbar-collapse");
+      for (var i = 0; i < navbarCollapseEls.length; i++)
+      {
+        navbarCollapseEls[i]
+          .classList.toggle("open")
+      }
+    }
+
+    var toggleNavbarCollapseEls = document.getElementsByClassName("toggle-navbar-collapse");
+    for (var i = 0; i < toggleNavbarCollapseEls.length; i++)
+    {
+      toggleNavbarCollapseEls[i]
+        .addEventListener("click", toggleNavbarCollapse, false);
+    }
+
   }, false);
 }());