added dropdown languege switcher

package-lock.json

@@ -9,6 +9,7 @@
       "dependencies": {
         "@astrojs/markdoc": "^0.15.10",
         "@astrojs/node": "^9.5.3",
+        "@coreui/icons": "^3.0.1",
         "@dotenvx/dotenvx": "^1.52.0",
         "@fontsource-variable/kameron": "^5.2.8",
         "@fontsource-variable/kreon": "^5.2.8",
@@ -427,6 +428,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/@coreui/icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@coreui/icons/-/icons-3.0.1.tgz",
+      "integrity": "sha512-u9UKEcRMyY9pa4jUoLij8pAR03g5g6TLWV33/Mx2ix8sffyi0eO4fLV8DSTQljDCw938zt7KYog5cVKEAJUxxg==",
+      "license": "MIT"
+    },
     "node_modules/@dotenvx/dotenvx": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/@dotenvx/dotenvx/-/dotenvx-1.52.0.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@astrojs/markdoc": "^0.15.10",
     "@astrojs/node": "^9.5.3",
+    "@coreui/icons": "^3.0.1",
     "@dotenvx/dotenvx": "^1.52.0",
     "@fontsource-variable/kameron": "^5.2.8",
     "@fontsource-variable/kreon": "^5.2.8",

src/components/Header.astro

@@ -47,11 +47,25 @@ const tl = createTranslator(Astro.currentLocale);
             <div class="w-50">
               <Button class="px-8 py-2 uppercase text-lg mt-8" title={tl("nav.contact")} url="#contact" variant="primary" />
             </div>
+            <div class="dropdown mt-10">
+            <div tabindex="0" role="button" class="btn-ghost m-1 cursor-pointer"><Icon name="ph:translate" class="text-2xl" /></div>
+            <ul tabindex="-1" class="dropdown-content text-tertiary text-lg bg-colorPrimary menu z-1 w-52 p-2 shadow-sm">
+              <li><a href="/es">🇪🇸 Espanol</a></li>
+              <li><a href="/en">🇬🇧 English</a></li>
+            </ul>
+          </div>
           </ul>
         </div>
       </div>
       <div class="w-50 hidden md:block">
-        <Button class="px-8 py-2 uppercase" title={tl("nav.contact")} url="#contact" variant="primary" />
+        <Button class="px-4 py-2 uppercase" title={tl("nav.contact")} url="#contact" variant="primary" />
+      </div>
+      <div class="dropdown dropdown-end lg:block hidden">
+        <div tabindex="0" role="button" class="btn-ghost m-1 cursor-pointer"><Icon name="ph:translate" class="text-2xl" /></div>
+        <ul tabindex="-1" class="dropdown-content text-tertiary text-lg bg-colorPrimary menu z-1 w-52 p-2 shadow-sm">
+          <li><a href="/es">🇪🇸 Espanol</a></li>
+          <li><a href="/en">🇬🇧 English</a></li>
+        </ul>
       </div>
     </nav>
   </div>