this is a dirty sync commit

src/App.vue

@@ -1,22 +1,30 @@
 <script lang="ts">
 import MainMenu from './components/MainMenu.vue'
 import Search from './components/Search.vue'
+import Data from './components/Data.vue'
 
 export default {
   components: {
     MainMenu,
-    Search
+    Search,
+    Data,
+  },
+  data() {
+    return {
+      applicationName: this.applicationName,
+    }
   }
 }
 </script>
 
 <template>
-  <header class="w-screen">
-    <h1 class="">{{ this.applicationName }}</h1>
+  <header class="w-screen flex flex-row">
+    <h1 class="">{{ applicationName }}</h1>
     <MainMenu />
     <Search />
   </header>
 
   <main>
+    <Data />
   </main>
 </template>

src/components/Data.vue

@@ -0,0 +1,18 @@
+<script lang="ts">
+export default {
+  data() {
+    return {
+      apiUri: this.appUri, 
+    }
+  }, 
+  methods: {
+    async fetchData() {
+      
+    }
+  }
+}
+</script>
+
+<template>
+  
+</template>

src/components/MainMenu.vue

@@ -1,16 +1,17 @@
 <script lang="ts">
+export default {
+  data() {
+    return {
+      menuEntries: this.menuEntries,
+    }
+  },
+}
 </script>
 
 <template>
-  <ul>
-    <li>
-      Startseite
-    </li>
-    <li>
-      Karte
-    </li>
-    <li>
-      Glossar
+  <ul class="flex flex-row">
+    <li class="p-2" v-for="entry of menuEntries">
+      <a :href="entry.uri">{{ entry.name }}</a>
     </li>
   </ul>
 </template>

src/components/Search.vue

@@ -1,5 +1,11 @@
 <script lang="ts">
-
+export default {
+  data() {
+    return {
+      searchTerm: '',
+    }
+  }
+}
 </script>
 
 <template>

src/main.ts

@@ -7,7 +7,22 @@ const app = createApp(App)
 
 app.config.globalProperties = {
   ...app.config.globalProperties,
+  apiUri: 'https://jsonplaceholder.typicode.com/posts/',
   applicationName: 'Stadtratmonitor',
+  menuEntries: {
+    0: {
+      name: 'Startseite',
+      uri: '/',
+    }, 
+    1: {
+      name: 'Karte',
+      uri: '/karte'
+    },
+    2: {
+      name: 'Glossar', 
+      uri: '/glossar'
+    }
+},
 }
 
 app.mount('#app')