temp

frontend/app/layouts/default.vue

@@ -1,9 +1,22 @@
 <script setup lang="ts">
+const { locale, setLocale, t } = useLocale()
+
+const otherLocale = computed(() => (locale.value === 'it' ? 'en' : 'it'))
+
+/**
+ * Switches the site language. On an article/category page, jumps to the
+ * translated counterpart's slug if one exists; elsewhere reloads the current
+ * route so it refetches its content in the new language.
+ */
+function switchLanguage() {
+  setLocale(otherLocale.value)
+  reloadNuxtApp({ path: useRoute().fullPath })
+}
 </script>
 
 <template>
   <div class="page">
-    <a class="skip-link" href="#main">Vai al contenuto</a>
+    <a class="skip-link" href="#main">{{ t('skipToContent') }}</a>
 
     <header class="site-header">
       <div class="container">
@@ -12,16 +25,19 @@
             <img src="/logo.png" :alt="SITE_NAME" width="400" height="400">
           </NuxtLink>
         </p>
-        <p class="tagline kicker">Articoli, guide e analisi.</p>
+        <p class="tagline kicker">{{ t('tagline') }}</p>
       </div>
 
-      <nav class="site-nav" aria-label="Navigazione principale">
+      <nav class="site-nav" :aria-label="t('navPrimary')">
         <div class="container nav-inner">
           <ul>
-            <li><NuxtLink to="/">Home</NuxtLink></li>
-            <li><NuxtLink to="/blog">Tutti gli articoli</NuxtLink></li>
-            <li><NuxtLink to="/come-difendersi-dal-corralito">Come difendersi dal corralito</NuxtLink></li>
+            <li><NuxtLink to="/">{{ t('navHome') }}</NuxtLink></li>
+            <li><NuxtLink to="/blog">{{ t('navAllArticles') }}</NuxtLink></li>
+            <li><NuxtLink to="/come-difendersi-dal-corralito">{{ t('navCorralito') }}</NuxtLink></li>
           </ul>
+          <button type="button" class="lang-switch" @click="switchLanguage">
+            {{ t('switchLanguage') }}
+          </button>
         </div>
       </nav>
     </header>
@@ -34,24 +50,24 @@
       <div class="container footer-inner">
         <div class="footer-block">
           <img class="footer-logo" src="/logo.png" :alt="SITE_NAME" width="400" height="400">
-          <p class="muted">Articoli, guide e analisi.</p>
+          <p class="muted">{{ t('tagline') }}</p>
           <address class="contact">
-            Contatti:
+            {{ t('footerContact') }}
             <a :href="`mailto:${SITE_EMAIL}`">{{ SITE_EMAIL }}</a>
           </address>
         </div>
 
-        <nav class="footer-block" aria-label="Naviga">
-          <p class="kicker">Naviga</p>
+        <nav class="footer-block" :aria-label="t('footerNavigate')">
+          <p class="kicker">{{ t('footerNavigate') }}</p>
           <ul>
-            <li><NuxtLink to="/">Home</NuxtLink></li>
-            <li><NuxtLink to="/blog">Tutti gli articoli</NuxtLink></li>
-            <li><NuxtLink to="/come-difendersi-dal-corralito">Come difendersi dal corralito</NuxtLink></li>
+            <li><NuxtLink to="/">{{ t('navHome') }}</NuxtLink></li>
+            <li><NuxtLink to="/blog">{{ t('navAllArticles') }}</NuxtLink></li>
+            <li><NuxtLink to="/come-difendersi-dal-corralito">{{ t('navCorralito') }}</NuxtLink></li>
           </ul>
         </nav>
 
-        <nav class="footer-block" aria-label="Seguici">
-          <p class="kicker">Seguici</p>
+        <nav class="footer-block" :aria-label="t('footerFollow')">
+          <p class="kicker">{{ t('footerFollow') }}</p>
           <ul>
             <li v-for="social in SOCIAL_LINKS" :key="social.name">
               <a class="social" :href="social.url" target="_blank" rel="noopener me">
@@ -64,7 +80,7 @@
       </div>
 
       <p class="container copyright kicker">
-        &copy; {{ new Date().getFullYear() }} {{ SITE_NAME }}. Tutti i diritti riservati.
+        &copy; {{ new Date().getFullYear() }} {{ SITE_NAME }}. {{ t('footerRights') }}
       </p>
     </footer>
   </div>
@@ -116,7 +132,10 @@
 
 .nav-inner {
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
+  align-items: center;
+  gap: 0.75rem 1.5rem;
   padding-block: 0.6rem;
 }
 
@@ -134,6 +153,24 @@
   text-transform: uppercase;
 }
 
+.lang-switch {
+  font: inherit;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  padding: 0.35rem 0.75rem;
+  color: var(--color-body);
+  background: none;
+  border: 1px solid var(--color-border);
+  cursor: pointer;
+}
+
+.lang-switch:hover {
+  color: var(--color-ink);
+  border-color: var(--color-ink);
+}
+
 @media (min-width: 48rem) {
   .site-nav {
     margin-top: 2rem;