Issue 5635 - Implement website-default navbar component

includes/components/navbar.html

Index: includes/components/navbar.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/components/navbar.html
@@ -0,0 +1,25 @@
+<div class="navbar bg-primary">
+  <div class="container">
+    <a href="index" class="navbar-branding float-start">
+      <img src="/img/png/eyeo-logo.png" srcset="/img/svg/eyeo-logo.svg 2x" alt="eyeo Website Defaults">

[juliandoucette, 2017/11/10 11:42:50]

SuperNIT: The image is about eyeo and the alt text is about website-defaults. I
think the alt text should be about the image.

[juliandoucette, 2017/11/10 11:42:51]

This image is not aligned vertically center within this <a>

[ire, 2017/11/13 17:57:38]

Done.

[ire, 2017/11/13 17:57:39]

Done.

+    </a>
+
+    <div class="toggle-navbar-collapse float-end">

[juliandoucette, 2017/11/10 11:42:51]

NIT: "toggle-navbar-collapse" (verb-noun) is inconsistent with "navbar-collapse"
(noun-verb). I suggest "navbar-toggle" (Ack this is a little awkward either way)

[ire, 2017/11/13 17:57:39]

It would have to be navbar-collapse-toggle since that it what it's targeting,
not the whole navbar. I'm indifferent about whether it's better, do you think I
should change to that?

[juliandoucette, 2017/11/14 15:34:16]

Ack :/
Yes

+      <button class="unstyled">
+        <span class="open-label">Open</span>

[juliandoucette, 2017/11/10 11:42:50]

NIT/Suggest: "navbar-open" and "navbar-close" would apply more generally to an
image or text

[juliandoucette, 2017/11/10 11:42:51]

NIT/Suggest: Use an image example instead of a text example. e.g. a hamburger
that turns into an X or just a hamburger.

[ire, 2017/11/13 17:57:39]

1. It would have to be `navbar-collapse-open`/close since that's what it is
targeting
2. I'm not sure `navbar-open` describes what this is. It seems like a class we
would apply to the navbar when it is open to me
3. I think a label can apply to an image as well

[ire, 2017/11/13 17:57:40]

I think this is something that can/should be handled for each site. For example
the help center wouldn't use it. 

[juliandoucette, 2017/11/14 15:34:16]

Ack :/

(Proceed as-is.)

[juliandoucette, 2017/11/14 15:34:16]

Ack, good point. I was thinking "the help centre uses an image too - so an image
is better than text." But text is fine as long as we don't repeat ourselves
overwriting it in the same way across websites (at which point we should
probably re-think this).

+        <span class="sr-only">/</span>
+        <span class="close-label">Close</span>
+        Menu
+      </button>
+    </div>
+
+    <nav class="nav navbar-collapse">

[juliandoucette, 2017/11/10 11:42:51]

NIT: It's inconsistent not to preface this "nav" class with "navbar"

[ire, 2017/11/13 17:57:39]

Done.

+      <ul>
+        <li><a href="index">Navbar Menu Link</a></li>
+        <li><a href="index">Navbar Menu Link</a></li>
+        <li><a href="index">Navbar Menu Link</a></li>
+        <li><a href="index">Navbar Menu Link</a></li>
+      </ul>
+    </nav>
+  </div>
+</div>