From 9e3ed36f346e89363f7cedde0c87b92c0f4d98d1 Mon Sep 17 00:00:00 2001
From: ximekilgsa <ximena.casadokilroe@gsa.gov>
Date: Thu, 22 Aug 2024 14:57:53 -0400
Subject: [PATCH 1/5] Add plus and minus svgs

---
 _img/minus.svg | 1 +
 _img/plus.svg  | 1 +
 2 files changed, 2 insertions(+)
 create mode 100644 _img/minus.svg
 create mode 100644 _img/plus.svg

diff --git a/_img/minus.svg b/_img/minus.svg
new file mode 100644
index 00000000..fe94d574
--- /dev/null
+++ b/_img/minus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>
\ No newline at end of file
diff --git a/_img/plus.svg b/_img/plus.svg
new file mode 100644
index 00000000..3399ab48
--- /dev/null
+++ b/_img/plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"/></svg>
\ No newline at end of file

From e86adae01f47bea570012468e3368b999619b080 Mon Sep 17 00:00:00 2001
From: ximekilgsa <ximena.casadokilroe@gsa.gov>
Date: Thu, 22 Aug 2024 15:04:42 -0400
Subject: [PATCH 2/5] On-page submenu styles

---
 styles/tts-custom-styles.scss | 97 +++++++++++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)

diff --git a/styles/tts-custom-styles.scss b/styles/tts-custom-styles.scss
index a7a28ce9..09107029 100644
--- a/styles/tts-custom-styles.scss
+++ b/styles/tts-custom-styles.scss
@@ -109,3 +109,100 @@ 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;
+        }
+      }
+    }
+
+  }
+}

From 9ef59477122413f4a565efcaa66146eeec32e6ca Mon Sep 17 00:00:00 2001
From: ximekilgsa <ximena.casadokilroe@gsa.gov>
Date: Thu, 22 Aug 2024 15:07:06 -0400
Subject: [PATCH 3/5] Add JS for on-page submenu toggle

---
 _includes/scripts.html | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/_includes/scripts.html b/_includes/scripts.html
index f5a3e103..130e8242 100644
--- a/_includes/scripts.html
+++ b/_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>

From ea185381644ff5d5bea662276026a46f65dbdc15 Mon Sep 17 00:00:00 2001
From: ximekilgsa <ximena.casadokilroe@gsa.gov>
Date: Thu, 22 Aug 2024 15:14:24 -0400
Subject: [PATCH 4/5] Add toggle button to sidenav html

---
 _includes/sidenav.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/_includes/sidenav.html b/_includes/sidenav.html
index 310dfd89..ad588a4e 100644
--- a/_includes/sidenav.html
+++ b/_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 %}

From dc636eea736485f0f5b5310a829cf9cdcc1e38e0 Mon Sep 17 00:00:00 2001
From: ximekilgsa <ximena.casadokilroe@gsa.gov>
Date: Fri, 23 Aug 2024 10:52:14 -0400
Subject: [PATCH 5/5] Update tts-custom-styles.scss

Mobile style tweaks
---
 styles/tts-custom-styles.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/styles/tts-custom-styles.scss b/styles/tts-custom-styles.scss
index 09107029..f5c2afcd 100644
--- a/styles/tts-custom-styles.scss
+++ b/styles/tts-custom-styles.scss
@@ -206,3 +206,13 @@ h5 {
 
   }
 }
+
+@media only screen and ( max-width: 768px ) {
+  .usa-layout-docs__main {
+    padding: 1rem;
+  }
+
+  .usa-layout-docs__sidenav {
+    padding: 0rem 1rem 2rem;
+  }
+}