Merge pull request #8 from data-miner00/dev

i18n Enhancement

app.vue

@@ -1,5 +1,5 @@
 <template>
-  <Header />
+  <VHeader />
   <NuxtPage />
-  <Footer />
+  <VFooter />
 </template>

components/ContentNotFound.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="py-20 md:py-0">
     <h1 class="text-5xl font-semibold text-center mb-2 md:mb-20">
-      <span class="text-black dark:text-gray-50">404 Not Found</span>
+      <span class="text-black dark:text-gray-50">{{ $t("error.title") }}</span>
     </h1>
     <p class="text-lg text-gray-600 dark:text-gray-200 text-center">
-      The content does not exist. Please try another one.
+      {{ $t("error.description") }}
     </p>
   </div>
 </template>

components/LanguageSwitcher.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const switchLocalePath = useSwitchLocalePath();
 const isPopupOpen = useState("popup-open", () => false);
 
 function closePopup() {
@@ -45,18 +46,23 @@ function closePopup() {
       v-if="isPopupOpen"
       class="absolute -bottom-36 right-0 flex flex-col items-stretch rounded"
     >
-      <NuxtLink to="/fr" @click="closePopup" class="language"
-        ><span class="block">🇫🇷</span> French</NuxtLink
+      <NuxtLink
+        :to="switchLocalePath('fr')"
+        @click="closePopup"
+        class="language"
+        ><span class="block">🇫🇷</span> Français</NuxtLink
       >
-      <NuxtLink to="/" @click="closePopup" class="language"
+      <NuxtLink
+        :to="switchLocalePath('en')"
+        @click="closePopup"
+        class="language"
         ><span class="block">🇺🇸</span> English</NuxtLink
       >
     </div>
   </div>
 </template>
 
-<style scoped lang="scss">
-.language {
-  @apply p-2 block hover:border-gray-200 dark:hover:border-slate-600 dark:hover:bg-slate-700 hover:bg-white border border-solid border-transparent rounded text-center;
-}
+<style scoped lang="sass">
+.language
+  @apply p-2 block hover:border-gray-200 dark:hover:border-slate-600 dark:hover:bg-slate-700 hover:bg-white border border-solid border-transparent rounded text-center
 </style>

components/MobileSidebar.vue

@@ -1,28 +1,34 @@
 <script setup lang="ts">
 defineProps(["open", "toggleSidebar"]);
+const localePath = useLocalePath();
 
 const links = [
   {
-    title: "Home",
+    translationKey: "header.home",
     path: "/",
   },
   {
-    title: "Guide",
+    translationKey: "header.guide",
     path: "/guide",
   },
   {
-    title: "Demo",
+    translationKey: "header.demo",
     path: "/demo",
   },
   {
-    title: "Resources",
+    translationKey: "header.resources",
     path: "/resources",
   },
+  {
+    translationKey: "header.blogs",
+    path: "/blogs/my-first-blog",
+  },
 ];
 </script>
 
 <template>
-  <div
+  <aside
+    aria-label="mobile-sidebar"
     v-if="open"
     class="fixed top-0 left-0 z-20 bg-gray-900/50 w-screen h-screen lg:hidden"
     @click="toggleSidebar"
@@ -36,7 +42,7 @@ const links = [
         class="flex border-b border-solid border-gray-300 dark:border-gray-700 items-center px-5 py-4 justify-between"
       >
         <div class="text-xl font-bold mr-5">
-          <NuxtLink to="/" class="flex items-center">
+          <NuxtLink :to="localePath('/')" class="flex items-center">
             <img src="/nuxt.svg" alt="Nuxt logo" class="block w-8 h-8" />
             <span class="ml-1 block">Templatr</span>
           </NuxtLink>
@@ -59,14 +65,14 @@ const links = [
           >
             <NuxtLink
               class="block px-3 py-2 rounded font-semibold text-sm hover:bg-green-200/50 dark:hover:bg-cyan-400/50"
-              :to="link.path"
+              :to="localePath(link.path)"
               exact-active-class="text-green-400 bg-green-200/50 dark:bg-cyan-400/50 dark:text-cyan-400"
             >
-              {{ link.title }}
+              {{ $t(link.translationKey) }}
             </NuxtLink>
           </li>
         </ul>
       </nav>
     </div>
-  </div>
+  </aside>
 </template>