base structure and display

components/ContentBuilder.vue

@@ -0,0 +1,5 @@
+<template>
+  <p>Content Builder</p>
+</template>
+
+<script setup lang="ts"></script>

components/Footer.vue

@@ -1 +1,20 @@
-<template>Footer</template>
+<template>
+  <div darkgray class="h-48 min-h-fit w-full px-5 py-10 flex-col justify-center items-center flex">
+    <div class="self-stretch py-5 justify-center items-center gap-10 inline-flex">
+      <NuxtLink v-for="link in footer.links" :key="link.id" :to="link.URL" :target="link.target" class="text-base">
+        {{ link.text }}
+      </NuxtLink>
+    </div>
+    <div class="text-base">@Copyright {{ new Date().getFullYear() }} {{ footer.copyright }}</div>
+    <div class="text-base">verwaltet von {{ footer.designed_developed_by }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type Global from "../types/single/global";
+
+const { findOne } = useStrapi();
+
+const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
+const { footer } = global.value?.data as unknown as Global;
+</script>

components/Header.vue

@@ -1 +1,52 @@
-<template>Header</template>
+<template>
+  <div class="sticky top-0 h-fit">
+    <div primary class="h-24 min-h-fit w-full px-12 py-2.5 justify-between items-center gap-5 flex">
+      <NuxtLink to="/">
+        <img class="h-16 w-fit" :src="baseUrl + navbar.logo.url" />
+      </NuxtLink>
+      <div class="self-stretch p-2.5 justify-center items-center gap-7 flex">
+        <NuxtLink
+          primary-link
+          v-for="link in navbar.navbar_items"
+          :key="link.id"
+          :to="`/${link.URL}/${link.default_active_child}`"
+          :class="link.URL == params?.[0] ? 'active' : ''"
+        >
+          {{ link.name }}
+        </NuxtLink>
+      </div>
+    </div>
+    <div
+      v-if="navbar_sub_items?.length != 0"
+      primary
+      class="h-12 min-h-fit w-full px-12 border-t-2 border-white justify-center items-center gap-5 flex"
+    >
+      <NuxtLink
+        primary-sublink
+        v-for="sublink in navbar_sub_items"
+        :key="sublink.id"
+        :to="`/${params?.[0]}/${sublink.URL}`"
+        :class="sublink.URL == params?.[1] ? 'active' : ''"
+      >
+        {{ sublink.name }}
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type Global from "../types/single/global";
+
+const {
+  params: { slug: params },
+} = useRoute();
+const baseUrl = useStrapiUrl().replace("/api", "");
+const { findOne } = useStrapi();
+
+const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
+const { navbar } = global.value?.data as unknown as Global;
+
+const navbar_sub_items = computed(() => {
+  return navbar.navbar_items.find((ni) => ni.URL == params?.[0])?.navbar_sub_items;
+});
+</script>

components/NotFound.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="h-[calc(100vh-18rem)] w-full flex items-center justify-center">Nicht gefunden</div>
+</template>