feat: 選択している言語をわかりやすくする

Author: staticWagomU

2025/src/components/LanguagePicker.astro

@@ -1,10 +1,12 @@
 ---
 import { languages } from '../i18n/ui';
 import { base } from "astro:config/client"
+
+const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, "");
 ---
 <ul class="language-picker">
   {Object.entries(languages).map(([lang, label]) => (
-    <li>
+    <li class:list= {[{ active: pathname.startsWith(`/${label}`) }]} >
       <a href={`${base}/${lang}/`}>{label}</a>
     </li>
   ))}
@@ -18,12 +20,23 @@ ul {
   display: flex;
   justify-content: flex-end;
   margin-right: 1rem;
+
+  a {
+    text-decoration: none;
+  }
+
 }
 
 li:first-child::after {
   content: '/';
   display: 'inline block'
   margin: 0 8px;
   color: #333;
+
+}
+
+li.active > a {
+  font-weight: bold;
+  text-decoration: underline;
 }
 </style>