feat: add links and language switcher to header

app/components/Home/Header.vue

@@ -15,41 +15,69 @@
         class="data-[pos=here]:font-extrabold"
         @click="scrollToId('our-mission')"
       >
-        Our mission
+        {{ $t("landingPageMain") }}
         <arrow-down
           :data-pos="ourMissionPosition"
           class="inline-block opacity-100 transition-all duration-500 data-[pos=up]:-rotate-180
             data-[pos=here]:opacity-0"
         />
       </cv-header-menu-item>
       <cv-header-menu-item to="/journey" :active="activeJourney">
-        Voter journey <arrow-up-right class="inline-block" />
+        {{ $t("appHeaderVoterJourney") }} <arrow-up-right class="inline-block" />
       </cv-header-menu-item>
       <cv-header-menu-item
         :data-pos="ourValuesPosition"
         class="data-[pos=here]:font-extrabold"
         @click="scrollToId('our-values')"
       >
-        Our Values
+        {{ $t("appHeaderOurValues") }}
         <arrow-down
           :data-pos="ourValuesPosition"
           class="inline-block opacity-100 transition-all duration-500 data-[pos=up]:-rotate-180
             data-[pos=here]:opacity-0"
         />
       </cv-header-menu-item>
       <cv-header-menu-item :active="activeVoterSupport" to="/voterSupport">
-        Voter support <arrow-up-right class="inline-block" />
+        {{ $t("appHeaderVoterSupport") }} <arrow-up-right class="inline-block" />
       </cv-header-menu-item>
       <cv-header-menu-item :active="activeWhyVote" to="/whyVote">
-        Why Vote <arrow-up-right class="inline-block" />
+        {{ $t("appHeaderWhyVote") }} <arrow-up-right class="inline-block" />
       </cv-header-menu-item>
     </cv-header-nav>
+    <template #header-global>
+      <cv-link
+        class="p-1"
+        href="https://www.instagram.com/fivefifthsvoter/?igshid=Zjc2ZTc4Nzk%3D"
+        target="_blank"
+      >
+        <instagram class="text-carbon-gray-30" />
+      </cv-link>
+      <cv-link
+        class="p-1"
+        href="https://github.com/Call-for-Code-for-Racial-Justice/Five-Fifths-Voter"
+        target="_blank"
+      >
+        <git-hub class="text-carbon-gray-30" />
+      </cv-link>
+      <cv-header-global-action
+        :aria-label="$t('ariaLanguageSetting')"
+        aria-controls="language-panel"
+        :label="$t('ariaLanguageSetting')"
+        class="!h-6 !min-h-0 !px-0 !py-3.5"
+        tip-position="left"
+      >
+        <language-switcher class="text-carbon-gray-30" />
+      </cv-header-global-action>
+    </template>
+    <template #right-panels>
+      <language-panel />
+    </template>
     <template #left-panels>
       <cv-side-nav id="side-nav" :rail="false" :fixed="true" :expanded="false">
         <cv-side-nav-items>
           <cv-side-nav-link @click="scrollTop()">
             <template #nav-icon><home-icon /></template>
-            Home
+            {{ $t("appHeaderHome") }}
           </cv-side-nav-link>
           <cv-side-nav-link @click="scrollToId('our-mission')">
             <template #nav-icon
@@ -58,11 +86,11 @@
                 class="inline-block opacity-100 transition-all duration-500 data-[pos=here]:-rotate-90
                   data-[pos=up]:-rotate-180 md:data-[pos=here]:opacity-0"
             /></template>
-            Our Mission
+            {{ $t("landingPageMain") }}
           </cv-side-nav-link>
           <cv-side-nav-link to="/journey">
             <template #nav-icon><voter-journey-icon /></template>
-            Voter Journey
+            {{ $t("appHeaderVoterJourney") }}
           </cv-side-nav-link>
           <cv-side-nav-link @click="scrollToId('our-values')">
             <template #nav-icon
@@ -71,15 +99,15 @@
                 class="inline-block opacity-100 transition-all duration-500 data-[pos=here]:-rotate-90
                   data-[pos=up]:-rotate-180 md:data-[pos=here]:opacity-0"
             /></template>
-            Our Values
+            {{ $t("appHeaderOurValues") }}
           </cv-side-nav-link>
           <cv-side-nav-link to="/voterSupport">
             <template #nav-icon><voter-support-icon /></template>
-            Voter Support
+            {{ $t("appHeaderVoterSupport") }}
           </cv-side-nav-link>
           <cv-side-nav-link to="/whyVote">
             <template #nav-icon><why-vote-icon /></template>
-            Why Vote
+            {{ $t("appHeaderWhyVote") }}
           </cv-side-nav-link>
         </cv-side-nav-items>
       </cv-side-nav>
@@ -95,6 +123,9 @@ import {
   Help16 as WhyVoteIcon,
   ArrowDown16 as ArrowDown,
   ArrowUpRight16 as ArrowUpRight,
+  LogoInstagram24 as Instagram,
+  LogoGithub24 as GitHub,
+  Language24 as LanguageSwitcher,
 } from "@carbon/icons-vue";
 import lodash from "lodash";
 

app/components/LanguagePanel.vue

@@ -0,0 +1,46 @@
+<template>
+  <cv-header-panel
+    id="language-panel"
+    :class="{
+      '-mt-4': headerSize === 'thin',
+      'mt-12': headerSize === 'thick',
+    }"
+  >
+    <cv-switcher>
+      <cv-switcher-item v-for="entry in languages" :key="entry.title">
+        <cv-switcher-item-link
+          :selected="entry.language === locale"
+          :class="{ '!bg-ff-purple-02': entry.language === locale }"
+          @click="changeLocale(entry.language)"
+        >
+          {{ entry.title }}
+        </cv-switcher-item-link>
+      </cv-switcher-item>
+    </cv-switcher>
+  </cv-header-panel>
+</template>
+<script setup>
+defineProps({
+  headerSize: { type: String, default: "thin" },
+});
+const languages = [
+  { flag: "", language: "en", title: "English" },
+  { flag: "", language: "es", title: "Español" },
+  { flag: "", language: "hi", title: "हिंदी" },
+  { flag: "", language: "kr", title: "한국어" },
+  { flag: "", language: "sc", title: "汉语" },
+  { flag: "", language: "zh", title: "漢語" },
+  { flag: "", language: "ru", title: "русский" },
+  { flag: "", language: "ar", title: "اللغة العربية" },
+  { flag: "", language: "fa", title: " زبان فارسی" },
+  { flag: "", language: "ja", title: "日本語" },
+  { flag: "", language: "tl", title: "Tagalog" },
+  { flag: "", language: "vn", title: "ngôn ngữ tiếng Việt" },
+];
+
+const { setLocale, locale } = useI18n();
+function changeLocale(locale) {
+  document.activeElement.blur();
+  if (setLocale) setLocale(locale);
+}
+</script>

app/components/TheHeader.vue

@@ -11,54 +11,84 @@
     >
     <cv-header-nav aria-label="Five Fifths Voter navigation">
       <cv-header-menu-item to="/#our-mission">
-        Our mission
+        {{ $t("landingPageMain") }}
       </cv-header-menu-item>
       <cv-header-menu-item
         to="/journey"
         :class="{ '!bg-ff-purple-02': activeJourney }"
       >
-        Voter journey
+        {{ $t("appHeaderVoterJourney") }}
+      </cv-header-menu-item>
+      <cv-header-menu-item to="/#our-values">
+        {{ $t("appHeaderOurValues") }}
       </cv-header-menu-item>
-      <cv-header-menu-item to="/#our-values"> Our Values </cv-header-menu-item>
       <cv-header-menu-item
         :class="{ '!bg-ff-purple-02': activeVoterSupport }"
         to="/voterSupport"
       >
-        Voter support
+        {{ $t("appHeaderVoterSupport") }}
       </cv-header-menu-item>
       <cv-header-menu-item
         :class="{ '!bg-ff-purple-02': activeWhyVote }"
         to="/whyVote"
       >
-        Why Vote
+        {{ $t("appHeaderWhyVote") }}
       </cv-header-menu-item>
     </cv-header-nav>
+    <template #header-global>
+      <cv-link
+        class="px-2 py-8"
+        href="https://www.instagram.com/fivefifthsvoter/?igshid=Zjc2ZTc4Nzk%3D"
+        target="_blank"
+      >
+        <instagram class="text-carbon-gray-30" />
+      </cv-link>
+      <cv-link
+        class="px-2 py-8"
+        href="https://github.com/Call-for-Code-for-Racial-Justice/Five-Fifths-Voter"
+        target="_blank"
+      >
+        <git-hub class="text-carbon-gray-30" />
+      </cv-link>
+      <cv-header-global-action
+        :aria-label="$t('ariaLanguageSetting')"
+        aria-controls="language-panel"
+        :label="$t('ariaLanguageSetting')"
+        class="!mx-2 !h-6 !min-h-0 !px-0 !py-12"
+        tip-position="left"
+      >
+        <language-switcher class="text-carbon-gray-30" />
+      </cv-header-global-action>
+    </template>
+    <template #right-panels>
+      <language-panel header-size="thick" />
+    </template>
     <template #left-panels>
       <cv-side-nav id="side-nav" :rail="false" :fixed="true" :expanded="false">
         <cv-side-nav-items>
           <cv-side-nav-link to="/">
             <template #nav-icon><home-icon /></template>
-            Home
+            {{ $t("appHeaderHome") }}
           </cv-side-nav-link>
           <cv-side-nav-link to="/#our-mission">
             <template #nav-icon><our-mission-icon /></template>
-            Our Mission
+            {{ $t("landingPageMain") }}
           </cv-side-nav-link>
           <cv-side-nav-link to="/journey">
             <template #nav-icon><voter-journey-icon /></template>
-            Voter Journey
+            {{ $t("appHeaderVoterJourney") }}
           </cv-side-nav-link>
           <cv-side-nav-link to="/#our-values">
             <template #nav-icon><our-values-icon /></template>
-            Our Values
+            {{ $t("appHeaderOurValues") }}
           </cv-side-nav-link>
           <cv-side-nav-link to="/voterSupport">
             <template #nav-icon><voter-support-icon /></template>
-            Voter Support
+            {{ $t("appHeaderVoterSupport") }}
           </cv-side-nav-link>
           <cv-side-nav-link to="/whyVote">
             <template #nav-icon><why-vote-icon /></template>
-            Why Vote
+            {{ $t("appHeaderWhyVote") }}
           </cv-side-nav-link>
         </cv-side-nav-items>
       </cv-side-nav>
@@ -74,7 +104,11 @@ import {
   Group16 as OurValuesIcon,
   HelpDesk16 as VoterSupportIcon,
   Help16 as WhyVoteIcon,
+  LogoInstagram32 as Instagram,
+  LogoGithub32 as GitHub,
+  Language32 as LanguageSwitcher,
 } from "@carbon/icons-vue";
+import LanguagePanel from "~/components/LanguagePanel.vue";
 defineOptions({
   name: "TheHeader",
 });

app/i18n.config.js

@@ -0,0 +1,4 @@
+export default {
+  fallbackLocale: "en",
+  missingWarn: false,
+};

app/lang/ar.json

@@ -85,7 +85,7 @@
   "supportFelons": "التصويت لمن لديهم جنايات",
   "supportDisabled": "نصائح للمصوّتين من ذوي الاحتياجات الخاصة",
   "registerYouth_1": "هل عمرك 17-18؟ هل تعلم أنه يمكنك التسجيل المسبق للتصويت؟",
-  "registerYouth_2": "كاليفورنيا: تعرف على كيفية إجراء ذلك من {here}. يمكن لـ {ymca} دعمك أيضًا.",
+  "registerYouth_2": "كاليفورنيا: تعرف على كيفية إجراء ذلك من {here}. [يمكن ]لـ {ymca}[ دعمك] أيضًا.",
   "registerYouth_2a": "هنا",
   "registerYouth_2b": "جمعية الشبان المسيحيين، لوس أنجلوس",
   "registerYouth_3": "على الصعيد الوطني: ابحث عن {state} الخاصة بك",

app/lang/en.json

@@ -8,7 +8,9 @@
   "quotePaulRepetto": "Enablement is the key to closing the gap between intention and action.",
 
   "whyVoteBtn": "Why Vote",
+  "appHeaderHome": "Home",
   "appHeaderWhyVote": "Why Vote",
+  "appHeaderOurValues": "Our Values",
   "appHeaderVoterJourney": "Voter Journey",
   "appHeaderGetConnected": "Get Connected",
   "appHeaderVoterSupport": "Voter Support",

app/lang/es.json

@@ -87,7 +87,7 @@
   "supportFelons": "El voto de las personas que cometieron delitos graves",
   "supportDisabled": "Consejos electorales para discapacitados",
   "registerYouth_1": "¿Tiene entre 17 y 18 años? ¿Sabía que puede preinscribirse para votar?",
-  "registerYouth_2": "California: Descubre cómo {aquí}. El {ymca} también puede apoyarte.",
+  "registerYouth_2": "California: Descubre cómo [aquí]({here}). [El]({ymca}) también puede apoyarte.",
   "registerYouth_2a": "aquí",
   "registerYouth_2b": "YMCA LA",
   "registerYouth_3": "Nacional: Encuentra tu {estado}",

app/lang/hi.json

@@ -85,10 +85,10 @@
   "supportFelons": "अपराधों में दोषी पाए गए लोगों के लिए मतदान",
   "supportDisabled": "विकलांगों के लिए मतदान संबंधी टिप्स",
   "registerYouth_1": "उम्र 17-18? क्या आप जानते हैं कि आप मतदान के लिए पहले ही पंजीकरण करा सकते हैं?",
-  "registerYouth_2": "कैलिफ़ोर्निया: जानें कैसे {यहां}। {ymca} भी आपका समर्थन करता है।",
+  "registerYouth_2": "कैलिफ़ोर्निया: जानें कैसे [यहां]({here})।  [भी]({ymca}) आपका समर्थन करता है।",
   "registerYouth_2a": "यहां",
   "registerYouth_2b": "YMCA LA",
-  "registerYouth_3": "राष्ट्रीय: अपना {राज्य} ढूंढें",
+  "registerYouth_3": "राष्ट्रीय: अपना {state} ढूंढें",
   "registerYouth_3a": "राज्य संबंधी आवश्यकताएं",
   "voteElectionMissing": "यदि आपको अपना चुनाव नहीं मिल रहा है, तो संभव है कि जानकारी अभी गूगल सिविक इंफॉर्मेशन API के माध्यम से उपलब्ध न हो। अपने राज्य के चुनावों के बारे में अधिक जानकारी प्राप्त करने के लिए 'सूचित करें' टैब देखें।",
   "voteEarlyNoLocationFound": "कोई ज्ञात लोकेशन नहीं। अपने स्थानीय चुनाव अधिकारियों से बात करें। मतदान की जानकारी को सत्यापित करने के लिए दिए गए लिंक इस्तेमाल करें। यह राज्य संबंधी जानकारी शायद अभी गूगल सिविक इंफॉर्मेशन API के माध्यम से उपलब्ध नहीं है।",

app/lang/ja.json

@@ -85,10 +85,10 @@
   "supportFelons": "重罪犯の投票について",
   "supportDisabled": "障がい者のための投票のアドバイス",
   "registerYouth_1": "年齢は17～18歳ですか？ 投票の事前登録ができることをご存知でしたか？",
-  "registerYouth_2": "カリフォルニア：その方法は{こちら}をご覧ください。 また、{ymca}でもサポートしてくれます。",
+  "registerYouth_2": "カリフォルニア：その方法は[こちら]({here})をご覧ください。 また、{ymca}でもサポートしてくれます。",
   "registerYouth_2a": "こちら",
   "registerYouth_2b": "YMCA LA",
-  "registerYouth_3": "全国：自分の{州}を見つける",
+  "registerYouth_3": "全国：自分の{state}を見つける",
   "registerYouth_3a": "州の要件",
   "voteElectionMissing": "選挙が見つからない場合は、現在Google Civic Information APIから情報を入手できない可能性があります。 「Get Informed」タブをチェックして、あなたの州の選挙に関する詳細情報を確認してください。",
   "voteEarlyNoLocationFound": "既知の場所はありません。 お住まいの地域の選挙管理委員会にご確認ください。 リンクを使用して、投票情報を確認してください。 この州の情報は、現在、Google Civic Information APIを通じて入手できない可能性があります。",

app/lang/kr.json

@@ -85,7 +85,7 @@
   "supportFelons": "재소자 투표",
   "supportDisabled": "장애인을 위한 투표 팁",
   "registerYouth_1": "17-18세의 유권자 이십니까? 투표하기 위해 사전 등록할 수 있다는 것을 알고 계셨습니까?",
-  "registerYouth_2": "캘리포니아: {여기}에서 방법을 알아보십시오. {ymca}도 당신을 지원할 수 있습니다.",
+  "registerYouth_2": "캘리포니아: [여기]({here})에서 방법을 알아보십시오. {ymca}도 당신을 지원할 수 있습니다.",
   "registerYouth_2a": "여기를 확인하십시오",
   "registerYouth_2b": "YMCA LA",
   "registerYouth_3": "전국: {state} 찾기",