Add navbar specs

docs/cyp/components/navbar.html

@@ -0,0 +1,168 @@
+---
+layout: cypress
+title: Components/Navbar
+---
+
+{% capture content %}
+  <div class="navbar-brand">
+    <a class="navbar-item" href="{{ site.url }}">
+      <img src="{{ site.url }}/images/bulma-logo.png" width="112" height="28">
+    </a>
+
+    <a class="navbar-burger">
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+    </a>
+  </div>
+
+  <div class="navbar-menu">
+    <div class="navbar-start">
+      <a class="navbar-item">
+        Home
+      </a>
+
+      <a class="navbar-item is-active">
+        Documentation
+      </a>
+
+      <div class="navbar-item has-dropdown is-hoverable">
+        <a class="navbar-link">
+          More
+        </a>
+
+        <div class="navbar-dropdown">
+          <a class="navbar-item">
+            About
+          </a>
+          <a class="navbar-item">
+            Jobs
+          </a>
+          <a class="navbar-item">
+            Contact
+          </a>
+          <hr class="navbar-divider">
+          <a class="navbar-item">
+            Report an issue
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="navbar-end">
+      <div class="navbar-item">
+        <div class="buttons">
+          <a class="button is-primary">
+            <strong>Sign up</strong>
+          </a>
+          <a class="button is-light">
+            Log in
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endcapture %}
+
+<nav id="navbar" class="navbar">
+  {{ content }}
+</nav>
+
+<nav id="navbar-container" class="navbar">
+  <div class="container">
+    {{ content }}
+  </div>
+</nav>
+
+<nav id="navbar-has-shadow" class="navbar has-shadow">
+  {{ content }}
+</nav>
+
+<nav id="navbar-is-fixed-top" class="navbar is-fixed-top">
+  {{ content }}
+</nav>
+
+<nav id="navbar-is-fixed-bottom" class="navbar is-fixed-bottom">
+  {{ content }}
+</nav>
+
+{% for color in site.data.colors.justColors %}
+  <nav id="navbar-{{ color }}" class="navbar is-{{ color }}">
+    <div class="navbar-brand">
+      <a class="navbar-item" href="{{ site.url }}">
+        {% if include.light %}
+          <img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
+        {% else %}
+          <img src="{{ site.url }}/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
+        {% endif %}
+      </a>
+      <div class="navbar-burger" data-target="navMenuColor{{ color }}-example">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </div>
+
+    <div id="navMenuColor{{ color }}-example" class="navbar-menu">
+      <div class="navbar-start">
+        <a class="navbar-item" href="{{ site.url }}/">
+          Home
+        </a>
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-link" href="{{ site.url }}/documentation/overview/start/">
+            Docs
+          </a>
+          <div class="navbar-dropdown">
+            <a class="navbar-item" href="{{ site.url }}/documentation/overview/start/">
+              Overview
+            </a>
+            <a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/">
+              Modifiers
+            </a>
+            <a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
+              Columns
+            </a>
+            <a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
+              Layout
+            </a>
+            <a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
+              Form
+            </a>
+            <hr class="navbar-divider">
+            <a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
+              Elements
+            </a>
+            <a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
+              Components
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div class="navbar-end">
+        <div class="navbar-item">
+          <div class="field is-grouped">
+            <p class="control">
+              <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="https://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=https://bulma.io&amp;via=jgthms">
+                <span class="icon">
+                  <i class="fab fa-twitter"></i>
+                </span>
+                <span>
+                  Tweet
+                </span>
+              </a>
+            </p>
+            <p class="control">
+              <a class="button is-primary" href="{{ site.data.meta.download }}">
+                <span class="icon">
+                  <i class="fas fa-download"></i>
+                </span>
+                <span>Download</span>
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+{% endfor %}