Gainsight/Custom_Templates/customer_templates/DeepL/_header.html.liquid

{% assign userLanguage = current_person.properties.learner_language |  upcase%}

<div id="loader-overlay">
  <div class="loader"></div>
</div>

<header class="header">
  <div class="np-header-content np-max-width">
    <div class="np-hidden-desktop np-header-mobile-menu-nav">
      {% if current_person.signed_in? %}
        <button
          data-toggle-class="np-hidden"
          class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
          data-toggle-target=".np-header-mobile-avatar-menu,
          .np-header-mobile-menu-content, .np-main, .np-footer"
        ></button>
        <button
          data-test="open-mobile-menu"
          data-toggle-class="np-hidden"
          class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
          data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
        >
          <img
            alt="{{ current_person.name }}"
            class="np-header-avatar-image"
            src="{{ current_person.avatar_url }}"
          />
        </button>
      {% endif %}
    </div>

    <div class="header-navigation-container">
      <div class="header-logo">
        <a class="deepl-logo" href="/app">
          <img class="deepl-logo-img" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/DeepL/images/Academy.png" alt="">
        </a>
      </div>
      <div class="navigation">
          <a href="/app/learning_paths" id="lp"  class="navigation-item lang-en">
          Learning paths
          </a>
           <a href="/app/learning_paths" id="lp"  class="navigation-item lang-de">
          Lernpfade
          </a>
          <a href="/app/learning_paths" id="lp"  class="navigation-item lang-jp">
          学習プログラム
          </a>
          <a href="/app/learning_paths" id="lp"  class="navigation-item lang-fr">
          Parcours d’apprentissage
          </a>
          <a href="/app/catalog" id="courses"  class="navigation-item lang-en">
          Courses
          </a>
          <a href="/app/catalog" id="courses"  class="navigation-item lang-de">
          Kurse
          </a>
          <a href="/app/catalog" id="courses"  class="navigation-item lang-jp">
          コース
          </a>
          <a href="/app/catalog" id="courses"  class="navigation-item lang-fr">
          Formations
          </a>
    
          <a href="/app/training_events" id="webinars" class="navigation-item lang-en">
          Webinars
          </a>
           <a href="/app/training_events" id="webinars" class="navigation-item lang-de">
          Webinare
          </a>
          <a href="/app/training_events" id="webinars" class="navigation-item lang-jp">
          ウェビナー
          </a>
          <a href="/app/training_events" id="webinars" class="navigation-item lang-fr">
          Webinaires
          </a>
          <a href="/app/resources" id="resources" class="navigation-item lang-en">
          Resources
          </a>
           <a href="/app/resources" id="resources" class="navigation-item lang-de">
          Ressourcen
          </a>
          <a href="/app/resources" id="resources" class="navigation-item lang-jp">
          資料
          </a>
          <a href="/app/resources" id="resources" class="navigation-item lang-fr">
          Ressources
          </a>
      </div>
    </div>

    {% if current_person.signed_in? %}
      <div class="header-profile-container">
        <div class="np-hidden-mobile search-bar">
          <form action="{% route search %}" method="get" data-test="desktop-search">
            <input
              aria-label="{% t .search %}"
              class="search-input"
              type="text"
              name="q"
              placeholder="{% t .search %}"
            />
            <i class="header-search-icon far fa-search"></i>
          </form>
        </div>
        {% if current_person.properties.new_content %}
          <div class="languge-dropdown">
            <button
              type="button"
              class="navigation-item languge-dropdown-button lang-en"
              data-toggle-class="is-open"
              data-toggle-target-next
              data-toggle-outside
              data-toggle-escape>
              <span style="display:inline-block">Language</span>
 	      
            </button>

  <button
              type="button"
              class="navigation-item languge-dropdown-button lang-de"
              data-toggle-class="is-open"
              data-toggle-target-next
              data-toggle-outside
              data-toggle-escape>
              <span style="display:inline-block">Sprache</span>
 	      
            </button>
      
      <button
              type="button"
              class="navigation-item languge-dropdown-button lang-fr"
              data-toggle-class="is-open"
              data-toggle-target-next
              data-toggle-outside
              data-toggle-escape>
              <span style="display:inline-block">Langue</span>
 	      
            </button>
            
            <button
              type="button"
              class="navigation-item languge-dropdown-button lang-jp"
              data-toggle-class="is-open"
              data-toggle-target-next
              data-toggle-outside
              data-toggle-escape>
              <span style="display:inline-block">言語</span>
 	      
            </button>
            
            <ul class="languge-dropdown-list">
              <li>
                <button
                  type="button"
                  id="en-lang"
                  data-lang="en"
                  class="lang-option active"
                  data-toggle-trigger-off
                  >
                  <span style="display:inline-block">English</span>
                </button>
              </li>
              <li>
                <button
                  type="button"
                  id="de-lang"
                  data-lang="de"
                  class="lang-option"
                  data-toggle-trigger-off>
                  <span style="display:inline-block">Deutsch</span>
                </button>
              </li>
              <li>
                <button
                  type="button"
                  id="fr-lang"
                  data-lang="fr"
                  class="lang-option active"
                  data-toggle-trigger-off
                  >
                  <span style="display:inline-block">Français</span>
                </button>
              </li>
              <li>
                <button
                  type="button"
                  id="jp-lang"
                  data-lang="jp"
                  class="lang-option active"
                  data-toggle-trigger-off
                  >
                  <span style="display:inline-block">日本語</span>
                </button>
              </li>
            </ul>
          </div>
        {% endif %}
        <div class="np-hidden-mobile np-header-avatar">
          <button
            class="np-header-avatar-button"
            data-test="open-desktop-menu"
            data-toggle-class-on-target="np-hidden"
            data-toggle-target=".np-header-avatar-tooltip"
            data-toggle-outside
          >
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 6C0 2.68629 2.68629 0 6 0H34C37.3137 0 40 2.68629 40 6V34C40 37.3137 37.3137 40 34 40H6C2.68629 40 0 37.3137 0 34V6Z" fill="#EDEDED"/>
            <path d="M26.6666 27.5V25.8333C26.6666 24.9493 26.3154 24.1014 25.6903 23.4763C25.0652 22.8512 24.2173 22.5 23.3333 22.5H16.6666C15.7825 22.5 14.9347 22.8512 14.3096 23.4763C13.6844 24.1014 13.3333 24.9493 13.3333 25.8333V27.5M23.3333 15.8333C23.3333 17.6743 21.8409 19.1667 19.9999 19.1667C18.159 19.1667 16.6666 17.6743 16.6666 15.8333C16.6666 13.9924 18.159 12.5 19.9999 12.5C21.8409 12.5 23.3333 13.9924 23.3333 15.8333Z" stroke="#0F2B46" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <div class="np-header-avatar-tooltip np-hidden" role="tooltip">
            <span class="np-header-avatar-tooltip-arrow-up"></span>
            <div class="np-header-avatar-tooltip-learner">
              <div class="np-header-avatar-tooltip-learner-name">
                {{ current_person.name }}
              </div>
              <div class="np-header-avatar-tooltip-learner-email">
                {{ current_person.email }}
              </div>
            </div>
            <nav class="np-header-avatar-tooltip-navigation">
              {% unless current_school.sso_active? %}
                <a
                  class="np-header-avatar-tooltip-navigation-link"
                  href="{% route account %}"
                >
                  {% t .profile_settings %}
                </a>
              {% endunless %}
              {% if current_person.signed_in? %}
                <a
                  class="np-header-avatar-tooltip-navigation-link"
                  href="{% route transcript %}"
                >
                  {% t .transcript %}
                </a>
              {% endif %}
              <a
                class="np-header-avatar-tooltip-navigation-link np-danger"
                href="{% route logout %}"
              >
                {% t .sign_out %}
              </a>
            </nav>
          </div>
        </div>
      </div>
    {% else %}
      <a
        class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
        aria-label="{% t shared.sign_in %}"
        href="{% route login %}"
      >
        {% t shared.sign_in %}
      </a>
    {% endif %}
  </div>
</header>

<div class="np-hidden-desktop">
  <div class="np-header-mobile-menu-content np-hidden">
    {% if current_person.signed_in? %}
      <img
        alt="{{ current_person.name }}"
        class="np-header-mobile-menu-content-avatar"
        src="{{ current_person.avatar_url }}"
      />
      <div class="np-header-mobile-menu-content-name">
        {{ current_person.name }}
      </div>
    {% endif %}
    <div class="np-header-mobile-menu-content-nav">
      <form
        class="np-header-search"
        data-test="mobile-search"
        method="get"
        action="{% route search %}"
      >
        <input
          aria-label="{% t .search %}"
          class="np-header-search-input"
          type="text"
          name="q"
          placeholder="{% t .search %}"
        />
        <i class="header-search-icon far fa-search"></i>
      </form>
      {% for website_navigation in navigations.header_navigations %}
        <a
          href="{{ website_navigation.path }}"
          class="np-header-mobile-menu-content-button"
          {% if website_navigation.external? %} target="_blank" {% endif %}
        >
          {{ website_navigation.name }}
        </a>
      {% endfor %}
      <div class="np-header-mobile-menu-content-line"></div>
        {% unless current_school.sso_active? %}
          <a
            class="np-header-mobile-menu-content-button"
            href="{% route account %}"
          >
            {% t .profile_settings %}
          </a>
        {% endunless %}
        {% if current_person.signed_in? %}
        <a
          class="np-header-mobile-menu-content-button"
          href="{% route transcript %}"
        >
          {% t .transcript %}
        </a>
      {% endif %}
      <a
        class="np-header-mobile-menu-content-button np-danger"
        href="{% route logout %}"
      >
        {% t .sign_out %}
      </a>
    </div>
  </div>
</div>

{% include "messages" %}


<style>
  .deepl-logo-img {
  width: 100%;
  max-width: 230px;
}
.header-navigation-container {
  display: flex;
  align-items: center;
  gap: 30px;
}
.deepl-logo {
  display: flex;
}
  .header-profile-container {
  display: flex;
  align-items: center;
  }
  .np-header-content {
  display: flex;
  justify-content: space-between;
}
.search-bar {
  position: relative;
  height: fit-content;
}
.navigation {
  display: flex;
  gap: 25px;
  height: 100%;
}
.search-input {
  border: 1px solid rgba(0,0,0, 0.25);
  padding: 5px 10px;
  border-radius: 8px;
}
.navigation-item {
  text-decoration: none;
  color: #0f2b46;
  padding: 5px 10px;
}
.navigation-item:hover {
  color: #42A2FF;
}

.active-nav {
  color: #42A2FF;
}
.header {
  background: #f8f8f8;
  padding: 10px 40px;
}
.header-search-icon {
  position: absolute;
  left: 10px;
  height: 100%;
  display: flex;
  align-items: center;
  top: 0%;
}
.search-input {
  border: 1px solid rgba(0,0,0, 0.25);
  padding: 5px 10px 5px 30px;
  border-radius: 8px;
}
.languge-dropdown {
	position: relative;
	display: inline-block;
  margin-left:24px;
}
.languge-dropdown-button {
	display: inline-block;
	padding: 0;
	overflow: hidden;
	border: none;
  background: #ededed;
  height: 40px;
  border-radius: 4px;
  padding: 0 15px;
  cursor: pointer;
}
.np-header-avatar-button {
  display: flex;
}
.languge-dropdown-button::after {
  font-family:"Font awesome 5 Pro";
	display: inline-block;
	content: "\f078";
	transition: transform .25s ease-out;
  margin-left:4px;
}
.languge-dropdown-button.is-open::after {
	transform: rotate(180deg);
}
.languge-dropdown-list {
	position: absolute;
	top: 50px;
	left: 0;
	z-index: 1;
	display: block;
	width: max-content;
	min-width: 100%;
	max-width: 15em;
	max-height: 13em;
	overflow: auto;
	padding: 0;
	margin: 0;
	transform: translateY(-1em);
	transform-origin: center top;
	background-color: white;
	perspective: 1000px;
  box-shadow: 0 0 8px rgba(72,103,118,.5);
	list-style: none;
	visibility: hidden;
	opacity: 0;
	transition: .25s ease-in;
  border-radius: 8px;
}
.languge-dropdown-list.is-open {
	transform: translateY(0);
	visibility: visible;
	opacity: 1;
	transition-timing-function: ease-out;
}
.languge-dropdown-list li {
	border-bottom: 1px solid #ededed;
  cursor:pointer;
  padding:12px 24px;
}
.languge-dropdown-list li:hover button,
.languge-dropdown-list li:focus button{
	font-weight:700;
}
.languge-dropdown-list li button.active {
	font-weight:700;
  cursor:text;
}
.languge-dropdown-list li:last-child {
	border-bottom: none;
}
.languge-dropdown-list button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: none;
	background: none;
	text-align: left;
}
.languge-dropdown-list button:hover,
.languge-dropdown-list button:focus {
  cursor:pointer;
}
</style>

<script>
  const url = window.location.pathname;

  const lp = document.getElementById('lp');
  const academy = document.getElementById('academy');
  const courses = document.getElementById('courses');
  const webinars = document.getElementById('webinars');
  const resources = document.getElementById('resources');

  switch (url) {
    case '/app':
      academy.classList.add('active-nav');
      break;
    case '/app/learning_paths':
      lp.classList.add('active-nav');
      break;
    case '/app/catalog':
      courses.classList.add('active-nav'); 
      break;
    case '/app/training_events':
      webinars.classList.add('active-nav'); 
      break;
    case '/app/resources':
      resources.classList.add('active-nav'); 
      break;
    default:
      break;
  }

</script>

<script>
  function changeElementsText() {
    const searchInput = document.querySelector('.search-input');
    const selectedLang = localStorage.getItem("userLanguage");

    console.log(selectedLang);

    if (selectedLang === 'de') {
      searchInput.placeholder = "Suche";
    }
  }
  document.addEventListener("DOMContentLoaded", function() {
  let userLanguage = localStorage.getItem("userLanguage");
  let userLanguageCustomPropValue = '{{current_person.properties.learner_language}}'
  
  if (userLanguage === null) {
    userLanguage = "en";
    localStorage.setItem("userLanguage", userLanguage);
  }

  if (userLanguageCustomPropValue) {
    localStorage.setItem("userLanguage", userLanguageCustomPropValue);
  }

  document.body.setAttribute("data-lang", userLanguage);
  document.querySelectorAll(".lang-option").forEach(function(button) {
    button.classList.remove("active");
  });
  document.querySelector(`.lang-option[data-lang='${userLanguage}']`).classList.add("active");

  document.querySelectorAll(".lang-option").forEach(function(button) {
    button.addEventListener("click", function() {
      const selectedLangOption = this.getAttribute("data-lang");
      localStorage.setItem("userLanguage", selectedLangOption);

      document.querySelectorAll(".lang-option").forEach(function(button) {
        button.classList.remove("active");
      });
      this.classList.add("active");
      document.body.setAttribute("data-lang", selectedLangOption);

      document.getElementById("loader-overlay").style.display = "flex";

      fetch("https://webhooks.workato.com/webhooks/rest/3be1030a-8bc7-4063-a6dc-7e529b869613/user-language-handler", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          language: selectedLangOption,
          id: '{{current_person.id}}'
        })
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
      })
      .then(data => {
        console.log("Language information sent successfully:", data);
      })
      .catch(error => {
        console.error("Error sending language information:", error);
      });

      changeElementsText();

      setTimeout(() => {
        location.reload();
      }, 5000);
    });
  });
});
</script>