Issue 5635 - Implement website-default navbar component

static/js/navbar.js

Index: static/js/navbar.js
===================================================================
new file mode 100644
--- /dev/null
+++ b/static/js/navbar.js
@@ -0,0 +1,35 @@
+/*******************************************************************************
+ * Navbar Component

[juliandoucette, 2017/10/31 15:18:37]

Are you planning to add accessibility features like keyboard navigation
separately? (I haven't checked/confirmed that this is necessary - have you?)

[ire, 2017/11/02 11:15:25]

I haven't done much research either, but I would prefer to handle that in a
separate issue. That's the only thing I can think of that is missing is trapping
the keyboard focus within the collapsed section when it's open, but I'll look
into it more.

+ ******************************************************************************/
+(function()

[juliandoucette, 2017/10/31 15:18:37]

TOL: I'm not sure that we have to worry about polluting the global name space
with these

[ire, 2017/11/02 11:15:26]

You're probably right. I'll remove it.

[ire, 2017/11/02 11:15:26]

Done.

+{
+  document.addEventListener("DOMContentLoaded", function()
+  {
+
+    function Navbar(navbar)
+    {
+      this.navbar = navbar;
+
+      this.navbar
+          .querySelector(".toggle-navbar-collapse")
+          .addEventListener("click", this._onClick.bind(this), false);
+    }
+
+    Navbar.prototype.toggleCollapse = function()
+    {
+      this.navbar.classList.toggle("expanded");
+    };
+
+    Navbar.prototype._onClick = function()
+    {
+      this.toggleCollapse();
+    };
+
+    var navbars = document.getElementsByClassName("navbar");
+    for (var i = 0; i < navbars.length; i++)
+    {
+      new Navbar(navbars[i]);
+    }
+
+  }, false);
+}());