{% extends "../../styleguide/templates/styleguide.twig" %}

{# main content here #}
{% block content %}
<div class="styleguide-component__demo-description">
  <section>
    <h2>Navigation</h2>
    <div class="styleguide-component__demo-container" style="height: 400px; overflow: auto;">
      {% include "../../components/navigation/example.navigation.html.twig" %}
    </div>
    <p>
      The navigation strip sits at the top of the page. To build the navigation, pass it an array of menu options.
    </p>
    <div class="styleguide-component__demo-code">
      <pre>
        <code class="language-json">
          {
            class: 'user',
            items: [
              {
                label: 'Help',
                link : 'http://eurostar.com/uk-en/frequently-asked-questions'
              },
              {
                label: 'Manage a booking',
                link : 'http://eurostar.com/uk-en/manage-booking'
              },
              {
                label: 'Login/Register',
                link : 'http://eurostar.com/uk-en/login'
              }
            ]
          }
        </code>
      </pre>
    </div>
    <p>
      Menu options are built up of navigation links grouped by their type. The three types are <code>user</code>,
      <code>primary</code> and <code>secondary</code>. For example, the current group for "user" is as shown above.
    </p>
  </section>
  <section>
  <h3>Usage on a page</h3>
  <p>For the main page content to be animated off canvas it must be wrapped in div.site-wrapper--off-canvas. See the demo
    pages for more information.</p>
  </section>
  <section>
  <h3>Example Markup</h3>
  <div class="styleguide-component__demo-code">
<pre><code class="language-html">{% filter escape %}
{% include "../../components/navigation/example.navigation.html.twig" %}
{% endfilter %}</code></pre>
  </div>
  </section>
</div>
{% endblock content %}