fix: display url path correctly

components/ContentNavigation/CNCustom.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import type { QueryBuilderParams } from "@nuxt/content/dist/runtime/types";
 
-const Locale = useI18n().locale;
+const locale = useLocale().current.value;
 
-const updateNaviagation = ref(false);
+const updateNavigation = ref(false);
 
 const navLocaleQuery = computed((): QueryBuilderParams => {
 	return {
 		where: [
 			{
 				// Create a regex pattern to match the locale in the path
-				_path: { $contains: `/${Locale.value}/` },
+				_path: { $contains: `/${locale}/` },
 			},
 		],
 	};
@@ -23,18 +23,24 @@ const { data: fetchedNavigation } = await useAsyncData(
 		return contentNav;
 	},
 	{
-		watch: [navLocaleQuery, updateNaviagation],
+		watch: [navLocaleQuery, updateNavigation],
 	},
 );
 
 onBeforeMount(() => {
-	if (!fetchedNavigation.value || !fetchedNavigation.value[0]?._path.includes(Locale.value)) {
-		updateNaviagation.value = true;
+	if (!fetchedNavigation.value || !fetchedNavigation.value[0]?._path.includes(locale)) {
+		updateNavigation.value = true;
 	}
 });
 
 const navigation = computed(() => {
-	return fetchedNavigation.value?.[0]?.children ?? null;
+	return (
+		fetchedNavigation.value?.[0]?.children?.map((entry) => {
+			const newEntry = { ...entry };
+			newEntry._path = entry._path.replace(`/${locale}`, "");
+			return newEntry;
+		}) ?? null
+	);
 });
 </script>
 

pages/[...slug].vue

@@ -7,7 +7,7 @@ const locale = useLocale().current.value;
 <template>
 	<VSheet height="calc(100vh - 65px)" class="d-flex justify-center pt-5">
 		<VContainer class="text-center" data-test="main-content-renderer">
-			<ContentDoc :path="`/${locale}/${route.params.slug ? route.params.slug[1] : ''}`">
+			<ContentDoc :path="`/${locale}/${route.params.slug ? route.params.slug[0] : ''}`">
 				<template #not-found>
 					<h1>Document not found</h1>
 					<NuxtLink :to="localePath('/')">{{ $t("global.basics.backHome") }}.</NuxtLink>