Merge branch 'main' into sign_megalinter_keys

_includes/footer.html

@@ -23,12 +23,12 @@
 
             <div class="grid-col-auto">
               <a class="usa-social-link" href="https://twitter.com/GSA_TTS"
-                >{% image_with_class "_img/twitter.svg" "Twitter" %}</a>
+                >{% image_with_class "_img/twitter.svg" "" "Twitter" %}</a>
             </div>
 
             <div class="grid-col-auto">
               <a class="usa-social-link" href="https://www.linkedin.com/company/gsa-tts"
-              >{% image_with_class "_img/linkedin.svg" "LinkedIn" %}</a>
+              >{% image_with_class "_img/linkedin.svg" "" "LinkedIn" %}</a>
             </div>
 
           </div>

_includes/layouts/base.html

@@ -17,13 +17,7 @@
   {{ content }}
 
   {% include "footer.html" %}
-
-  {% comment %} Hide SVG Sprites {% endcomment %}
-  <div style="display: none;">
-    {% usa_icons_sprite %}
-    {% uswds_icons_sprite %}
-  </div>
-
+
   {% include "scripts.html" %}
 </body>
 

_includes/menu.html

@@ -97,7 +97,7 @@
               name="search"
             />
             <button class="usa-button" type="submit">
-              {% image_with_class "_img/search--white.svg" "usa-search__submit-icon" %}
+              {% image_with_class "_img/search--white.svg" "usa-search__submit-icon" "Search" %}
             </button>
           </form>
         </section>

_includes/scripts.html

@@ -34,3 +34,31 @@
     <script async src="https://search.usa.gov/javascripts/remote.loader.js" type="text/javascript"></script>
   {% endif %}
 {% endif %}
+
+<!-- Custom subnav toggle -->
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+      const toggle = document.querySelector('.usa-subnav-mobile-toggle');
+      if (toggle) {
+          toggle.addEventListener('click', function() {
+              toggle.classList.toggle('open-subnav');
+          });
+      }
+
+      if (window.innerWidth < 1024) {
+          const sidenavItems = document.querySelectorAll('li.usa-sidenav__item');
+          sidenavItems.forEach(function(item) {
+              if (item.querySelector('ul')) {
+                  item.classList.add('toggle-submenu');
+              }
+          });
+      }
+
+      const subtoggle = document.querySelectorAll('.toggle-submenu');
+      subtoggle.forEach(function(toggle) {
+          toggle.addEventListener('click', function() {
+              toggle.classList.toggle('open-subnav');
+          });
+      });
+  });
+</script>

_includes/search-gov.html

@@ -32,7 +32,7 @@
         name="search"
       />
       <button class="usa-button" type="submit">
-        {% image_with_class "_img/search--white.svg" "usa-search__submit-icon" %}
+        {% image_with_class "_img/search--white.svg" "usa-search__submit-icon" "Search" %}
       </button>
     </form>
-  </section>
+</section>

_includes/sidenav.html

@@ -1,3 +1,4 @@
+<button class="usa-subnav-mobile-toggle">Jump to section</button>
 <nav aria-label="Secondary navigation">
   <ul class="usa-sidenav">
     {% for link in links %}

styles/tts-custom-styles.scss

@@ -109,3 +109,110 @@ h5 {
 .usa-prose .usa-card:last-child {
   margin-bottom: 1rem;
 }
+
+.usa-subnav-mobile-toggle {
+  display: none;
+}
+
+/* Page sidenav */
+@media only screen and ( max-width: 1024px ) {
+  .usa-layout-docs main.display-flex {
+    flex-wrap: wrap;
+  }
+
+  .usa-layout-docs__main {
+    flex: 0 0 100%;
+    padding: 3rem;
+    order: 2;
+  }
+
+  .usa-layout-docs__sidenav {
+    flex: 0 0 100%;
+    order: 1;
+    padding: 0rem 3rem;
+
+    nav {
+      opacity: 0;
+      height: 0;
+      transition: all .3s ease-in-out;
+    }
+
+    .usa-subnav-mobile-toggle {
+      display: flex;
+      border: none;
+      background: transparent;
+      font-weight: 600;
+      font-size: 1.25rem;
+      gap: 8px;
+      align-items: center;
+      line-height: 1;
+
+      &::after {
+        content: url('../_img/plus.svg');
+        display: block;
+        height: 16px;
+        width: 16px;
+      }
+
+      &.open-subnav {
+        margin-bottom: .75rem;
+
+        &::after {
+          content: url('../_img/minus.svg');
+        }
+
+        + nav {
+          opacity: 1;
+          height: auto;
+          transition: all .3s ease-in-out;
+        }
+      }
+    }
+
+    .toggle-submenu {
+      position: relative;
+
+      &::before {
+        content: url('../_img/plus.svg');
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        top: 9px;
+        right: 16px;
+      }
+
+      a {
+        width: fit-content;
+      }
+
+      ul {
+        opacity: 0;
+        height: 0;
+        transition: all .3s ease-in-out;
+      }
+
+      &.open-subnav {
+        &::before {
+          content: url('../_img/minus.svg');
+        }
+
+        ul {
+          opacity: 1;
+          height: auto;
+          transition: all .3s ease-in-out;
+        }
+      }
+    }
+
+  }
+}
+
+@media only screen and ( max-width: 768px ) {
+  .usa-layout-docs__main {
+    padding: 1rem;
+  }
+
+  .usa-layout-docs__sidenav {
+    padding: 0rem 1rem 2rem;
+  }
+}