Create dropdown component and update language selection with API

src/components/global/Analytics.astro

@@ -0,0 +1,68 @@
+---
+// Environment Variables
+import {
+    ANALYTICS,
+    MATOMO_ID,
+    MATOMO_SRC,
+    PLAUSIBLE_DOMAIN,
+    PLAUSIBLE_SRC,
+    UMAMI_ID,
+    UMAMI_SRC,
+    AMPLITUDE_APIKEY,
+    METRICAL_APP,
+    FATHOM_SITE,
+    FATHOM_SRC,
+    MINIAML_ID,
+    SWETRIX_SRC,
+    SWETRIX_API,
+    SWETRIX_PROJECT_ID,
+    SIMPLEANALYTICS_DOMAIN
+} from '@utils/GetConfig'
+
+// Get Astro Analytics
+import {
+    Fathom,
+    Metrical,
+    Plausible,
+    SimpleAnalytics,
+    Umami,
+    Amplitude,
+    Matomo,
+    MinimalAnalytics
+} from 'astro-analytics'
+---
+
+<!-- https://gist.sudovanilla.org/Korbs/fac0f5b99a6e43679c1d38d614721b5e -->
+{ 
+  ()=> {
+    if (ANALYTICS === "None") {
+      return null
+    } else if (ANALYTICS === "Plausible") {
+      <Plausible domain={PLAUSIBLE_DOMAIN} src={PLAUSIBLE_SRC + "/yoursript.js"} />
+    } else if (ANALYTICS === "Umami") {
+      <Umami id="4fb7fa4c-5b46-438d-94b3-3a8fb9bc2e8b" src={UMAMI_SRC + "/umami.js"} />
+    } else if (ANALYTICS === "Amplitude") {
+      <Amplitude apiKey={AMPLITUDE_APIKEY} />
+    } else if (ANALYTICS === "Matomo") {
+      <Matomo id={MATOMO_ID} src={MATOMO_SRC} />
+    } else if (ANALYTICS === "Metrical") {
+      <Metrical app={METRICAL_APP} />
+    } else if (ANALYTICS === "Fathom") {
+      <Fathom site={FATHOM_SITE} src={FATHOM_SRC} />
+    } else if (ANALYTICS === "MinimalAnalytics") {
+      <MinimalAnalytics id={MINIAML_ID} />
+    } else if (ANALYTICS === "Swetrix") {
+      <script is:inline src={SWETRIX_SRC} defer></script>
+      <script is:inline>
+        document.addEventListener('DOMContentLoaded', function () {
+          swetrix.init({SWETRIX_PROJECT_ID})
+          swetrix.trackViews()
+        })
+      </script>
+      <noscript><img src={SWETRIX_API + '/log/noscript?pid=' + SWETRIX_PROJECT_ID} alt="" referrerpolicy="no-referrer-when-downgrade" /></noscript>
+    } else if (ANALYTICS === "Simple Analytics") {
+      <script is:inline async defer data-hostname={SIMPLEANALYTICS_DOMAIN} src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
+      <noscript><img src={'https://queue.simpleanalyticscdn.com/noscript.gif?hostname=' + SIMPLEANALYTICS_DOMAIN} alt="" referrerpolicy="no-referrer-when-downgrade" /></noscript>
+    }
+  }
+}

src/components/global/Header.astro

@@ -11,6 +11,7 @@ Message,
 // i18n
 import { t, changeLanguage } from "i18next"
 import { LanguageSelector } from "astro-i18next/components"
+import Dropdown from '@components/Dropdown.astro'
 ---
 
 <div class="header">
@@ -19,14 +20,27 @@ import { LanguageSelector } from "astro-i18next/components"
         <Search/>
     </div>
     <div class="header-end">
-        <LanguageSelector
-            showFlag={false}
-            languageMapping={{
-                en: "English",
-                jp: "Japanese",
-                ru: "Russian"
-            }}
-        />
+        <Dropdown Name="Language" OnClick="LanguageDropdownShow()">
+            <a href="/api/language/en/">English</a>
+            <a href="/api/language/jp/">Japanese</a>
+        </Dropdown>
         <a href="https://lemmy.world/c/minpluto" target="_blank"><Message/> {t("HEADER.FEEDBACK")}</a>
     </div>
-</div>
+</div>
+
+<script is:inline>
+function LanguageDropdownShow() {
+  var LanguageDropdown = document.querySelector('#Language-dropdown-menu')
+  var LanguageDropdownButton = document.querySelector('#Language-dropdown-button')
+  LanguageDropdownButton.setAttribute('onclick', 'LanguageDropdownHide()')
+  LanguageDropdown.style.display = 'flex'
+  LanguageDropdown.style.display = 'inherit'
+}
+function LanguageDropdownHide() {
+  var LanguageDropdown = document.querySelector('#Language-dropdown-menu')
+  var LanguageDropdownButton = document.querySelector('#Language-dropdown-button')
+  LanguageDropdownButton.setAttribute('onclick', 'LanguageDropdownShow()')
+  LanguageDropdown.style.display = 'none'
+  LanguageDropdown.style.display = 'none'
+}
+</script>