added links to both surveys in the header

Author: FionaDmello

survey_dashboard/hmc_layout/en_template.html

@@ -958,19 +958,41 @@
               </a>
             </div>
 
-            <div
-              class="pr-6 mt-10 lg:pr-12 xl:block"
-            >
-              <ul class="flex">
-                <li class="ml-2">
-                  <a
-                    class="text-blue-dark text-sm uppercase hmc_highlight_hover"
-                    href="https://2024.dashboard.survey.helmholtz-metadaten.de"
-                  >
-                    Data Professionals Survey 2024
-                  </a>
-                </li>
-              </ul>
+
+            <div class="flex" id="survey-nav">
+              <div
+                class="mt-10 mr-3"
+              >
+                <ul class="flex">
+                  <li class="ml-2">
+                    <a
+                      class="text-blue-dark text-sm uppercase survey-link"
+                      style="color: #002864;"
+                      href="https://2021.dashboard.survey.helmholtz-metadaten.de"
+                      data-survey="2021"
+                    >
+                      HMC Community Survey 2021
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div class="mt-10">|</div>
+              <div
+                class="pr-6 mt-10"
+              >
+                <ul class="flex">
+                  <li class="ml-2">
+                    <a
+                      class="text-blue-dark text-sm uppercase survey-link"
+                      style="color: #002864;"
+                      href="https://2024.dashboard.survey.helmholtz-metadaten.de"
+                      data-survey="2024"
+                    >
+                      HMC Data Professionals Survey 2024
+                    </a>
+                  </li>
+                </ul>
+              </div>
             </div>
           </div>
 
@@ -2033,6 +2055,42 @@
       }
     </script>
 
+    <!-- Survey Navigation Handler -->
+    <script>
+      // Variable to track which survey is selected (default: 2021)
+      var selected = '2021';
+
+      document.addEventListener('DOMContentLoaded', function() {
+        // Determine which survey is currently active based on URL
+        var currentUrl = window.location.hostname;
+        if (currentUrl.includes('2024.dashboard')) {
+          selected = '2024';
+        } else {
+          selected = '2021';
+        }
+
+        // Apply active styling to the selected survey link
+        var links = document.querySelectorAll('.survey-link');
+        links.forEach(function(link) {
+          var survey = link.getAttribute('data-survey');
+          if (survey === selected) {
+            link.style.color = '#14c8ff';
+
+          } else {
+            link.style.color = '#002864';
+
+          }
+        });
+
+        // Add click handlers to update selected variable
+        links.forEach(function(link) {
+          link.addEventListener('click', function() {
+            selected = link.getAttribute('data-survey');
+          });
+        });
+      });
+    </script>
+
     <!-- Matomo -->
     <script>
       var _paq = (window._paq = window._paq || []);