changed language selector

src/components/widgets/Header.astro

@@ -1,11 +1,11 @@
 ---
+// header.astro
 import { Icon } from 'astro-icon/components';
 import Logo from '~/components/Logo.astro';
 import ToggleTheme from '~/components/common/ToggleTheme.astro';
 import ToggleMenu from '~/components/common/ToggleMenu.astro';
 import Button from '~/components/ui/Button.astro';
 
-
 import { getHomePermalink } from '~/utils/permalinks';
 import { trimSlash, getAsset } from '~/utils/permalinks';
 import type { CallToAction } from '~/types';
@@ -46,36 +46,6 @@ const {
 } = Astro.props;
 
 const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
-
-// Define the available languages.
-const languages = [
-  { code: 'en', label: 'English' },
-  { code: 'nl', label: 'Nederlands' },
-  { code: 'de', label: 'Deutsch' },
-];
-
-// Get the current URL segments.
-const pathSegments = new URL(Astro.url).pathname.split('/').filter(Boolean);
-const currentLang = pathSegments[0] || 'en';
-
-// When the user selects a new language, update the URL accordingly.
-// This function assumes your pages are structured as /<lang>/page...
-function handleLanguageChange(event: Event) {
-  const select = event.target as HTMLSelectElement;
-  const selectedLang = select.value;
-  const newSegments = [...pathSegments];
-
-  // Replace the first segment if it matches a known language code; otherwise, add it.
-  if (['en', 'nl', 'de'].includes(newSegments[0])) {
-    newSegments[0] = selectedLang;
-  } else {
-    newSegments.unshift(selectedLang);
-  }
-
-  const newPath = '/' + newSegments.join('/');
-  window.location.href = newPath;
-}
-
 ---
 
 <header
@@ -167,7 +137,7 @@ function handleLanguageChange(event: Event) {
       ]}
     >
       <div class="items-center flex justify-between w-full md:w-auto">
-        <div class="flex">
+        <div class="flex items-center space-x-4">
           {showToggleTheme && <ToggleTheme iconClass="w-6 h-6 md:w-5 md:h-5 md:inline-block" />}
           {
             showRssFeed && (
@@ -180,43 +150,60 @@ function handleLanguageChange(event: Event) {
               </a>
             )
           }
-        </div>
-        <!-- Somewhere in your header markup (e.g., near your theme toggle) -->
-          <div class="ml-4">
-            <!-- Notice we add an id so we can easily select it in our client script -->
-            <select id="language-selector" class="p-2 border rounded bg-white text-gray-700">
-              {languages.map((lang) => (
-                <option value={lang.code} selected={lang.code === currentLang}>
-                  {lang.label}
-                </option>
-              ))}
-            </select>
+          <!-- Language Selector as Borderless Buttons -->
+          <div id="language-selector" class="flex space-x-4">
+            <button
+              type="button"
+              data-lang="en"
+              class="text-gray-600 hover:text-blue-500 focus:outline-none"
+            >
+              EN
+            </button>
+            <button
+              type="button"
+              data-lang="nl"
+              class="text-gray-600 hover:text-blue-500 focus:outline-none"
+            >
+              NL
+            </button>
+            <button
+              type="button"
+              data-lang="de"
+              class="text-gray-600 hover:text-blue-500 focus:outline-none"
+            >
+              DE
+            </button>
           </div>
-
-          <!-- Attach a client-side script to handle the change event -->
-          <script client:load>
-            const select = document.getElementById('language-selector');
-            select.addEventListener('change', (event) => {
-              const selectedLang = event.target.value;
-              // Get the current path from the browser (client-side)
-              const currentPath = window.location.pathname;
-              // Split the path into segments
-              const segments = currentPath.split('/').filter(Boolean);
-              // If the first segment is a supported language, replace it;
-              // otherwise, add the language code to the beginning.
-              const supportedLangs = ['en', 'nl', 'de'];
-              if (supportedLangs.includes(segments[0])) {
-                segments[0] = selectedLang;
-              } else {
-                segments.unshift(selectedLang);
-              }
-              // Rebuild the URL path and redirect
-              const newPath = '/' + segments.join('/');
-              window.location.href = newPath;
-            });
-          </script>
-
+        </div>
       </div>
     </div>
   </div>
+  <script client:load>
+    // Define supported languages
+    const supportedLangs = ['en', 'nl', 'de'];
+    // Split current URL path into segments
+    let segments = window.location.pathname.split('/').filter(Boolean);
+    // Determine current language based on URL, defaulting to 'en'
+    const currentLang = supportedLangs.includes(segments[0]) ? segments[0] : 'en';
+    
+    // Add active styling and event listeners to language buttons
+    document.querySelectorAll('#language-selector button').forEach((button) => {
+      if (button.getAttribute('data-lang') === currentLang) {
+        button.classList.add('font-bold', 'text-blue-500');
+      }
+      button.addEventListener('click', () => {
+        // Re-read the URL segments in case the path has changed
+        segments = window.location.pathname.split('/').filter(Boolean);
+        const selectedLang = button.getAttribute('data-lang');
+        if (supportedLangs.includes(segments[0])) {
+          segments[0] = selectedLang;
+        } else {
+          segments.unshift(selectedLang);
+        }
+        // Rebuild the URL and redirect
+        const newPath = '/' + segments.join('/');
+        window.location.href = newPath;
+      });
+    });
+  </script>
 </header>