Moved and Updated Instacart's language selector for their smartling testing.

Custom_Templates/customer_templates/Instacart - Partners/_head.html.liquid

@@ -1,3 +1,20 @@
 {% styles default %}
 {% styles colors %}
 {% styles custom %}
+<link
+  rel="stylesheet"
+  type="text/css"
+  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
+<link
+  rel="stylesheet"
+  type="text/css"
+  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" />
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link
+  rel="preconnect"
+  href="https://fonts.gstatic.com"
+  crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

Custom_Templates/customer_templates/Instacart - Partners/_header.html.liquid

@@ -73,6 +73,10 @@
             </div>
           </div>
           <nav class="np-header-avatar-tooltip-navigation">
+            {% include "language_selector"
+              , desktopMode: true
+              , parentClass: 'np-header-avatar-tooltip-navigation' %}
+
             {% unless current_school.sso_active? %}
               <a class="np-header-avatar-tooltip-navigation-link" href="{% route account %}">
                 {% t.profile_settings %}
@@ -113,6 +117,9 @@
       </div>
     {% endif %}
     <div class="np-header-mobile-menu-content-nav">
+      {% include "language_selector"
+        , desktopMode: false
+        , parentClass: 'np-header-mobile-menu-content-nav' %}
 
       <div class="np-header-mobile-menu-content-line"></div>
       <a class="np-header-mobile-menu-content-button np-danger" href="{% route logout %}">

Custom_Templates/customer_templates/Instacart - Partners/_language_selector.html.liquid

@@ -0,0 +1,119 @@
+{% assign desktopMode = desktopMode | default: false %}
+{% assign parentClass = parentClass | default: "" %}
+
+{% comment %}
+<a class="
+  {% if desktopMode %}
+    np-header-avatar-tooltip-navigation-link
+  {% else %}
+    np-header-mobile-menu-content-button
+  {% endif %}
+  " onclick="toggleLanguageSelector('{{parentClass}}')">
+  <span class="lang-en">Language</span>
+  <span class="lang-es">Idioma</span>
+  <div
+    {% if desktopMode %}
+    style="padding-top: 10px;"
+    {% endif %}
+    class="language-selector-dropdown">
+    <div class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" onclick="changeLanguage('en')">English</div>
+    <div class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" onclick="changeLanguage('es')">Español</div>
+  </div>
+</a>
+{% endcomment %}
+
+<a class="
+  {% if desktopMode %}
+    np-header-avatar-tooltip-navigation-link
+  {% else %}
+    np-header-mobile-menu-content-button
+  {% endif %}
+  " onclick="toggleLanguageSelector('{{parentClass}}')">
+  <span>Language</span>
+  <div{% if desktopMode %} style="padding-top: 10px;"{% endif %}class="language-selector-dropdown">
+	<a class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" href="/">English (USA)</a>
+	<a class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" href="/es-us">Español (Estados Unidos)</a>
+	<a class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" href="/fr-ca">Français  (Québec)</a>
+	<a class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" href="/es-es">Español (España)</a>
+	<a class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" href="/fr-fr">Français (France)</a>
+  </div>
+</a>
+
+<style>
+  .language-selector-dropdown {
+    position: absolute;
+    width: 97%;
+    background-color: white;
+    z-index: 1;
+    top: 54px;
+    padding: 0 10px 10px;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px 0 rgba(72, 103, 118, 0.65);
+  }
+
+  .language-selector-dropdown-item {
+    align-items: center;
+    background: #e4e8eb;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px 0 rgba(72, 103, 118, 0.15);
+    color: #305263;
+    display: flex;
+    font-size: 14px;
+    font-weight: 500;
+    height: 52px;
+    justify-content: center;
+    margin-top: 12px;
+    text-decoration: none;
+    width: 100%;
+  }
+</style>
+<script>
+  $(document).ready(function () {
+    $('.language-selector-dropdown').hide();
+
+    // Close dropdown when clicking outside
+    $(document).on('click', function (event) {
+      if (!$(event.target).closest('.language-selector-dropdown, [onclick*="toggleLanguageSelector"]').length) {
+        $('.language-selector-dropdown').hide();
+      }
+    });
+  });
+
+  function toggleLanguageSelector(parentClass) {
+    $(`.${parentClass} .language-selector-dropdown`).toggle();
+  }
+</script>
+	{% comment %}
+
+  function changeLanguage(language) {
+    const url = "https://instacart.northpass.com/learning/api/v1/carrot_academy/languages/{{current_person.id}}";
+    const token = document.querySelector('meta[name="csrf-token"]')?.content;
+
+    fetch(url, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": token
+        },
+        credentials: "include",
+        body: JSON.stringify({
+          language: language,
+        })
+      })
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok ' + response.statusText);
+        }
+        return response;
+      })
+      .then(data => {
+        const currentUrl = new URL(window.location.href);
+        currentUrl.searchParams.set('lang', language);
+        window.location.href = currentUrl.toString();
+      })
+      .catch(error => {
+        console.error("Error sending language information:", error);
+      });
+  }
+</script>
+{% endcomment %}

Custom_Templates/customer_templates/Instacart - Partners/_sub_navigation.html.liquid

@@ -55,9 +55,16 @@
     color: #0AAD0A;
   }
   @media (max-width: 600px) {
-    .sub-navigation {
+    .np-sub-navigation-content-item {
-      display: none;
+      margin: 0 5px;
     }
+    .np-sub-navigation-content-item-link {
+      font-size: 0.95rem;
+      padding: 6px 4px;
+    }
+    .np-sub-navigation-content {
+      justify-content: center;
+		}
   }
 </style>