initial

components/home/HomeContentList.vue

@@ -0,0 +1,34 @@
+<template>
+  <masonry-wall
+    :items="parentItems"
+    :ssr-columns="1"
+    :column-width="300"
+    :gap="10"
+  >
+    <template #default="{ item }">
+      <div :class="$style.row">
+        <LayoutMainMenuRow
+          :title="item.title"
+          :url="item.url"
+          :children="item.children"
+        />
+      </div>
+    </template>
+  </masonry-wall>
+</template>
+
+<script setup>
+const { data: navigation } = await useAsyncData("navigation", () => {
+  return fetchContentNavigation();
+});
+
+const parentItems = navigation.value.filter(
+  (it) => it.children && Array.isArray(it.children) && it.children.length > 0
+);
+</script>
+
+<style lang="scss" module>
+.row {
+  margin-bottom: 10px;
+}
+</style>

components/home/HomeReference.vue

@@ -0,0 +1,51 @@
+<template>
+  <article>
+    <h1>{{ item?.title }}</h1>
+
+    <ul v-if="item?.children?.length" :class="$style.list">
+      <li v-for="child in item.children" :key="item._id">
+        <NuxtLink :to="child._path">{{ child.title }}</NuxtLink>
+      </li>
+    </ul>
+  </article>
+</template>
+
+<script lang="ts" setup>
+import { NavItem } from "@nuxt/content/dist/runtime/types";
+
+interface Props {
+  url: string;
+}
+
+const findDeep = (items: NavItem[], path: string[]) => {
+  const item = items.find((it) => it._path.endsWith(path[0]));
+
+  if (!item || (path.length > 1 && !item.children?.length)) {
+    return null;
+  }
+
+  return path.length === 1
+    ? item
+    : findDeep(item.children, path.slice(1, path.length));
+};
+
+const props = defineProps<Props>();
+
+const { data: navigation } = await useAsyncData("navigation", () => {
+  return fetchContentNavigation();
+});
+
+const segments = props.url.split("/").filter((it) => it);
+const item = findDeep(navigation.value, segments);
+</script>
+
+<style lang="scss" module>
+.list {
+  margin: 0;
+  padding: 0 20px;
+
+  li a {
+    text-decoration: none;
+  }
+}
+</style>