uktrade/directory-components

{% extends 'demo/base.html' %}
{% load static %}
{% load breadcrumbs hero international_header from directory_components %}
{% load code from demo_tags %}

{% block body_header %}
    {% international_header navigation_tree=navigation_tree site_section=header_section site_sub_section=header_sub_section  %}
{% endblock %}

{% block head_css %}
  {{ block.super }}
  <link href="{% static 'directory_components/vendor/flag-icons/css/flag-icon.min.css' %}" rel="stylesheet" type="text/css" />
{% endblock %}

{% block header_js %}
  <script src="{% static 'directory_components/js/dit.responsive.js' %}"></script>
  <script src="{% static 'directory_components/js/dit.utils.js' %}"></script>
  <script src="{% static 'directory_components/js/dit.components.countrySelector.js' %}"></script>
  <script src="{% static 'directory_components/js/dit.components.languageSelectorDropdown.js' %}"></script>
  <script src="{% static 'directory_components/js/dit.components.header.js' %}"></script>
  <script src="{% static 'directory_components/js/dit.components.greatInternationalHeader.js' %}"></script>
{% endblock %}

{% block content %}

{% static 'images/hero02.png' as placeholder %}
{% hero background_image_url=placeholder hero_text="International header and footer" large_title=True %}

<div class="container">
  {% breadcrumbs 'International header footer' %}<a href="/">Home</a>{% endbreadcrumbs %}
</div>

<section class="padding-top-30">
  <div class="container">
    <div class="grid-row">
      <div class="column-two-thirds">
        <p>The International Header can be applied to a page by adding the following component to the header block.</p>
    
        <div>
        {% code 'django' %}
          {% international_header
                  navigation_tree=my_navigation_tree
                  site_section='<site-></site->section'
                  site_sub_section='site-sub-section'
          %}
        {% endcode %}


        </div>

        <p>Click around the header shown to get an idea of how it works.</p>


        <h2 class="heading-large">How to use the header</h2>

        <h3 class="heading-medium">Navigation Tree</h3>
        <p>A list of 'Header Nodes'. Represents the structure of the items in the header</p>

        <h3 class="heading-medium">Header Node</h3>
        <p>An object containing the following fields:</p>
        <ul>
          <li><em>tier_one_item: </em>A 'Header Item' representing a link in the top level of the navigation (eg 'About the UK' or 'Expand to the UK')</li>
          <li><em>tier_two_items: </em>A list of 'Header Items' representing the links within that section of the site (eg, the lighter second level nav that appears after clicking a top level link)</li>
        </ul>
        <h3 class="heading-medium">Header Item</h3>
        <p>An object containing the following fields:</p>
        <ul>
          <li><em>title: </em>The text for the link that appears on the page</li>
          <li><em>name: </em>The name of the item - used to determine the currently active areas of the site.</li>
          <li><em>url: </em>The URL to send the user to when they click on the item.</li>
        </ul>
        <h3 class="heading-medium">Site Section</h3>
        <p>A string indicating which section of the site the user is currently in.</p>
        <p>
          If the site_section matches the 'name' of one of the top tier header items, then that item is 'active'.
          An active item will be underlined, and the second tier navigation will show second tier items corresponding to that top tier item.
        </p>
        <p>
          If the site_section is empty (or doesn't match any of the header items) then no item will be active, and the second tier will not be displayed.
        </p>
        <h3 class="heading-medium">Site Sub Section</h3>
        <p>A string indicating which sub-section of the site the user is currently in.</p>
        <p>
          If the site_subsection matches the 'name' of one of the current second tier header items, then that item is 'active'.
          An active item will be underlined.
        </p>
        <p>
          If the site_subsection is empty (or doesn't match any of the header items) then no item will be active.
        </p>
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block body_footer %}
    {% include 'directory_components/header_footer/international_footer.html' %}
{% endblock %}