Merge pull request #16 from Bixal/feature-translate-in-extended-header

experimenting with translate as secondary link in extended header

_includes/foot.html

@@ -7,5 +7,5 @@
   </script>
   <script src="https://www.google-analytics.com/analytics.js" async></script>
 </body>
-
+{% include svg-sprite.html %}
 </html>

_includes/footer.html

@@ -41,7 +41,7 @@ <h4 class="usa-footer__primary-link">About</h4>
               <img class="usa-footer__logo-img" src="{{ site.baseurl }}/assets/img/Logo_USAGov.png" alt="placeholder logo">
             </div>
             <div class="mobile-lg:grid-col-auto">
-              <p class="usa-footer__logo-heading">{{ site.title }}</p>
+              <p class="usa-footer__logo-heading line-height-sans-3">{{ site.title }}</p>
             </div>
           </div>
           <div class="usa-footer__contact-links mobile-lg:grid-col-6">
@@ -74,13 +74,16 @@ <h4 class="usa-footer__primary-link">About</h4>
             </div>
             <h3 class="usa-footer__contact-heading">Agency Contact Center</h3>
             <address class="usa-footer__address">
-              <div class="usa-footer__contact-info grid-row grid-gap">
-                <div class="grid-col-auto">
+              <div class="usa-footer__contact-info grid-row grid-gap">       
+                <div class="grid-col-auto margin-bottom-1">
                   <a href="tel:1-800-555-5555">(800) CALL-GOVT</a>
                 </div>
-                <div class="grid-col-auto">
+                <div class="grid-col-auto margin-bottom-1">
                   <a href="mailto:[email protected]">[email protected]</a>
                 </div>
+                <div class="grid-col-auto margin-bottom-1">
+                  <a href="javascript:void(0);">Translate</a>
+                </div>
               </div>
             </address>
           </div>

_includes/navigation-extended.html

@@ -0,0 +1,58 @@
+<div class="usa-overlay"></div>
+<header class="usa-header usa-header--extended">
+  <div class="usa-navbar">
+    <div class="usa-logo" id="extended-logo">
+      <em class="usa-logo__text"><a href="{{ site.baseurl }}/" title="Home" aria-label="Home">{{ site.short-title }}</a></em>
+    </div>
+    <button class="usa-menu-btn">Menu</button>
+  </div>
+  <nav aria-label="Primary navigation" class="usa-nav">
+    <div class="usa-nav__inner"><button class="usa-nav__close"><img src="{{ site.baseurl }}/assets/img/usa-icons/close.svg" role="img" alt="close"></button>
+        <ul class="usa-nav__primary usa-accordion">
+            <li class="usa-nav__primary-item">
+              <a class="usa-nav__link {% if page.layout == "index" %} usa-current{% endif %}" href="{{ site.baseurl }}/"><span>Home</span></a>
+            </li>
+            <li class="usa-nav__primary-item">
+              <button class="usa-accordion__button usa-nav__link {% if page.layout == "product" %} usa-current{% endif %}" aria-expanded="false" aria-controls="basic-nav-section-one"><span>Categories</span></button>
+              <ul id="basic-nav-section-one" class="usa-nav__submenu">
+                {% for item in site.data.categories %}
+                <li class="usa-nav__submenu-item">
+                  <a href="{{ site.baseurl }}{{ item.url }}" class="">{{ item.name }}</a>
+                </li>
+                {% endfor %}
+              </ul>
+            </li>
+            <li class="usa-nav__primary-item">
+              <a class="usa-nav__link" href="javascript:void(0)"><span>About</span></a>
+            </li>
+          </ul>
+          <div class="usa-nav__secondary">
+            <ul class="usa-nav__secondary-links">
+              <li class="usa-nav__secondary-item">
+                <!-- <svg class="usa-icon text-base" aria-hidden="true" role="img">
+                    <use xlink:href="#language"></use>
+                </svg> -->
+                <a href="javascript:void(0);">Translate</a>
+              </li>
+              <li class="usa-nav__secondary-item">
+                <!-- <svg class="usa-icon text-base" aria-hidden="true" role="img">
+                    <use xlink:href="#mail_outline"></use>
+                </svg> -->
+                <a href="javascript:void(0);">Subscribe</a>
+              </li>
+              <li class="usa-nav__secondary-item">
+                <!-- <svg class="usa-icon text-base" aria-hidden="true" role="img">
+                  <use xlink:href="#phone"></use>
+                </svg> -->
+                <a href="javascript:void(0);">Contact</a>
+              </li>
+            </ul>
+            <form class="usa-search usa-search--small" role="search">
+              <label class="usa-sr-only" for="extended-search-field-small">Search small</label>
+              <input class="usa-input" id="extended-search-field-small" type="search" name="search">
+              <button class="usa-button" type="submit"><span class="usa-sr-only">Search</span></button>
+            </form>
+          </div>
+    </div>
+  </nav>
+</header>

_layouts/index.html

@@ -3,7 +3,7 @@
 {% include head.html %}
 
 <body>
-  {% include navigation.html %}
+  {% include navigation-extended.html %}
 
   <main>
     <div class="grid-container padding-y-2">

_layouts/product.html

@@ -3,7 +3,7 @@
 {% include head.html %}
 
 <body>
-  {% include navigation.html %}
+  {% include navigation-extended.html %}
 
   <main>
     <div class="grid-container">

assets/css/custom.css

@@ -18,4 +18,8 @@ h2, h3, h4, h5, h6 {
     margin-top: 2rem;
     margin-bottom: 1rem;
     color: #565c65; /* base-dark */
+}
+
+.usa-icon {
+    margin-bottom: -2px;
 }