Multiple changes

src/components/ContentComponent.vue

@@ -0,0 +1,73 @@
+<template>
+    <div>
+        <h1>{{ title }}</h1>
+        <div v-html="renderedContent"></div>
+    </div>
+</template>
+
+<script>
+import axios from '@/axios';
+import { mapState, mapGetters } from 'vuex';
+import { render } from '@/utils/render';
+
+export default {
+    name: 'ContentComponent',
+    props: {
+        link: {
+            type: String,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            content: '',
+            title: '',
+        };
+    },
+    computed: {
+        ...mapState(['menuData']),
+        ...mapGetters(['getMenuData']),
+        renderedContent() {
+            return render(this.content);
+        }
+    },
+    watch: {
+        link: {
+            immediate: true,
+            handler(newLink) {
+                this.fetchContent(newLink);
+                this.setTitle(newLink);
+            },
+        },
+    },
+    methods: {
+        async fetchContent(link) {
+            try {
+                const response = await axios.get(`/page-content?link=${link}`);
+                this.content = response.data.content;
+            } catch (error) {
+                console.error('Fehler beim Abrufen des Inhalts:', error);
+            }
+        },
+        setTitle(link) {
+            const findTitle = (menuItems, link) => {
+                for (const item of menuItems) {
+                    if (item.link === link) {
+                        return item.pageTitle || item.name;
+                    }
+                    if (item.submenu && item.submenu.length > 0) {
+                        const found = findTitle(item.submenu, link);
+                        if (found) {
+                            return `${found}`;
+                        }
+                    }
+                }
+                return '';
+            };
+            this.title = findTitle(this.menuData, link);
+        },
+    },
+};
+</script>
+
+<style scoped></style>