Use transition instead of fixed text

src/components/Dropdown.astro

@@ -4,6 +4,10 @@ const {
   Icon
 } = Astro.props
 
+// i18n
+import i18next, { t } from "i18next";
+import { Trans, HeadHrefLangs } from "astro-i18next/components";
+
 // Icons
 import {
     Menu,
@@ -33,35 +37,34 @@ if (Astro.url.pathname.startsWith('/watch')) {
 
 <button class="dropdown-button" onclick="ToggleHeaderDropdown()"><Menu/></button>
 <div id="primary" class="header-dropdown">
-  <p>Options</p>
-  <a onclick="ToggleHeaderDropdown(); ToggleHeaderLanguageDropdown()" style="justify-content: space-between;"><div><Language/> Language</div> <NavArrowRight/></a>
-  <a href=""><ProfileCircle/> Account</a>
-  <a href=""><Settings/> Settings</a>
-  <a href=""><List/> Instances</a>
+  <p>{t('dropdown.Options')}</p>
+  <a onclick="ToggleHeaderDropdown(); ToggleHeaderLanguageDropdown()" style="justify-content: space-between;"><div><Language/> {t('dropdown.Language')}</div> <NavArrowRight/></a>
+  <a href=""><ProfileCircle/> {t('dropdown.Account')}</a>
+  <a href=""><Settings/> {t('dropdown.Settings')}</a>
+  <a href=""><List/> {t('dropdown.Instances')}</a>
 
-  <p>Hub</p>
-  <a href=""><ViewGrid/> Apps</a>
-  <a href=""><Arcade/> Games</a>
+  <p>{t('dropdown.Hub')}</p>
+  <a href=""><ViewGrid/> {t('dropdown.Apps')}</a>
+  <a href=""><Arcade/> {t('dropdown.Games')}</a>
 
-  <p>Open in...</p>
-  <a href=""><CircleSpark/> Lite Mode</a>
-  <a href=""><Youtube/> YouTube</a>
-  <a href=""><OpenNewWindow/> Invidious</a>
-  <a href=""><OpenNewWindow/> Pipe</a>
-  <a href=""><OpenNewWindow/> Invidious</a>
+  <p>{t('dropdown.Openin')}</p>
+  <a href=""><CircleSpark/> {t('dropdown.LiteMode')}</a>
+  <a href=""><Youtube/> {t('dropdown.YouTube')}</a>
+  <a href=""><OpenNewWindow/> {t('dropdown.Invidious')}</a>
+  <a href=""><OpenNewWindow/> {t('dropdown.Pipe')}</a>
 
-  <p>Other</p>
-  <a href=""><InfoCircle/> About</a>
-  <a href=""><PrivacyPolicy/> Privacy</a>
-  <a href=""><Code/> Source Code</a>
+  <p>{t('dropdown.Other')}</p>
+  <a href=""><InfoCircle/> {t('dropdown.About')}</a>
+  <a href=""><PrivacyPolicy/> {t('dropdown.Privacy')}</a>
+  <a href=""><Code/> {t('dropdown.SourceCode')}</a>
 </div>
 <div id="language" class="header-dropdown">
   <p>Language</p>
   <a onclick="ToggleHeaderDropdown(); ToggleHeaderLanguageDropdown()"><NavArrowLeft/> Go Back</a>
-  <a href="">English</a>
+  <a href="/api/language/en/">English</a>
   <a href="">Spanish</a>
   <a href="">Russian</a>
-  <a href="">Japanese</a>
+  <a href="/api/language/jp/">Japanese</a>
 </div>
 
 <script is:inline>

src/components/global/Head.astro

@@ -1,4 +1,13 @@
 ---
+// i18n
+import i18next, { t } from "i18next";
+import { Trans, HeadHrefLangs } from "astro-i18next/components";
+
+if (Astro.cookies.get("Language").value === undefined) {Astro.cookies.set("Language", "EN", {path: "/",sameSite: 'strict'})}
+var UserLanguage = Astro.cookies.get("Language").value
+if      (UserLanguage === "JP") {i18next.changeLanguage("jp")}
+else if (UserLanguage === "EN") {i18next.changeLanguage("en")}
+
 // Properties
 const {
     Title,

src/components/global/Header.astro

@@ -1,4 +1,8 @@
 ---
+// i18n
+import i18next, { t } from "i18next";
+import { Trans, HeadHrefLangs } from "astro-i18next/components";
+
 // Components
 import { Image } from 'astro:assets';
 import { actions } from "astro:actions";
@@ -20,11 +24,11 @@ import {
 <header>
     <div class="header-content">
         <div class="header-start">
-            <Image src={Poke} alt="Poke Logo" height={24} />
+            <a href={'/' + i18next.language + '/'}><Image src={Poke} alt="Poke Logo" height={24} /></a>
         </div>
         <div class="header-center">
             <form>
-                <input type="text" placeholder="Search"/>
+                <input type="text" placeholder={t('header.search')}/>
                 <button type="submit"><Search/></button>
             </form>
         </div>