Added routing, Tidied up components directory and added part of an unfinished API

src/components/Home.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import Sidebar from "./home_components/sidebar.vue";
+import NiceThings from "./home_components/interesting-hashtags.vue";
+import Feed from "./home_components/feed.vue";
+import Contacts from "./home_components/contacts.vue";
+import Legal from "./home_components/legal.vue";
+</script>
+
+
+<template>
+  <div id="main" class="bg-weiss flex p-2">
+    <Sidebar></Sidebar>
+    <nice-things></nice-things>
+    <feed></feed>
+    <div class="w-1/4">
+      <contacts></contacts>
+      <legal></legal>
+    </div>
+  </div>
+</template>

src/components/Login.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Login Page
+</template>
+
+<style scoped>
+
+</style>

src/components/home_components/contacts.vue

@@ -15,12 +15,12 @@ const contacts =[
       <ul class="space-y-1">
         <li v-for="(contact) in contacts" :key="contact" class="bg-grau-hell2 flex justify-between rounded-lg">
           <!--CONTACT-->
-          <img src="../assets/default_pp.png" alt="" class="w-16 h-16 mr-2">
+          <img src="../../assets/default_pp.png" alt="" class="w-16 h-16 mr-2">
           <div class="flex flex-col">
             <label class="text-lg font-bold m-1" >{{ contact.display_name }}</label><br>
             <p class="text-base m-1 text-logo-farbe-blau underline-offset-3">@{{ contact.username }}</p>
           </div>
-          <img src="../assets/icons/mail.png" alt="" class="ml-auto">
+          <img src="../../assets/icons/mail.png" alt="" class="ml-auto">
         </li>
       </ul>
     </div>

src/components/home_components/feed.vue

@@ -55,7 +55,7 @@
       <ul>
         <li v-for="(postitem, indexus) in post" :key="post" class="border border-b-grau-hell rounded-lg p-1 m-2 bg-grau-hell2 flex">
           <!-- POST -->
-          <img src="../assets/default_pp.png" alt="" class="w-16 h-16">
+          <img src="../../assets/default_pp.png" alt="" class="w-16 h-16">
           <div>
             <div> <!-- POST HEADER -->
               <label class="text-lg font-bold m-1">{{postitem.author_display_name}}</label>
@@ -66,13 +66,13 @@
             </div>
             <div class="flex "> <!-- POST FOOTER -->
               <div class="flex"> <!-- Comments -->
-                <img src="../assets/icons/comment.png" alt="" class="align-middle">
+                <img src="../../assets/icons/comment.png" alt="" class="align-middle">
                 <label class="text-sm m-1" v-if="postitem.comments_count != undefined">{{ postitem.comments_count }}</label>
                 <label class="text-sm m-1" v-else>Comments disabled</label>
               </div>
 
               <div class="flex items-center" @click="addLike(indexus)"> <!-- Likes -->
-                <img type="image" alt="" src="../assets/icons/herz.png" class="align-middle">
+                <img type="image" alt="" src="../../assets/icons/herz.png" class="align-middle">
                 <label class="text-sm m-1">{{ postitem.likes }}</label>
               </div><!-- ENDE -->
             </div>

src/components/home_components/sidebar.vue

@@ -0,0 +1,42 @@
+
+<script setup lang="ts">
+// Funktionen um die Seiten zu öffnen
+// home -> app.vue
+const sb_home = () => {
+  console.log("home");
+}
+const sb_search = () => {
+  console.log("Search");
+}
+const sb_notifications = () => {
+  console.log("Notifications");
+}
+const sb_messages = () => {
+  console.log("Messages");
+}
+const sb_accounts = () => {
+  console.log("Accounts");
+}
+const sb_settings = () => {
+  console.log("Settings");
+}
+
+</script>
+
+<template>
+  <div class="pt-4 pl-1">
+    <img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24">
+    <div class="align-middle space-y-3 pt-3 pl-3">
+      <img src="../../assets/icons/home-black.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_home">
+      <img src="../../assets/icons/lupe.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_search">
+      <img src="../../assets/icons/glocke.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_notifications">
+      <img src="../../assets/icons/mail.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_messages">
+      <img src="../../assets/icons/user.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg" v-on:click="sb_accounts">
+      <img src="../../assets/icons/zahnrad.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg" v-on:click="sb_settings">
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/sidebar.vue

@@ -1,42 +0,0 @@
-
-<script setup lang="ts">
-// Funktionen um die Seiten zu öffnen
-// home -> app.vue
-const sb_home = () => {
-  console.log("home");
-}
-const sb_search = () => {
-  console.log("Search");
-}
-const sb_notifications = () => {
-  console.log("Notifications");
-}
-const sb_messages = () => {
-  console.log("Messages");
-}
-const sb_accounts = () => {
-  console.log("Accounts");
-}
-const sb_settings = () => {
-  console.log("Settings");
-}
-
-</script>
-
-<template>
-  <div class="pt-4 pl-1">
-    <img src="../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24">
-    <div class="align-middle space-y-3 pt-3 pl-3">
-      <img src="../assets/icons/home-black.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_home">
-      <img src="../assets/icons/lupe.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_search">
-      <img src="../assets/icons/glocke.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_notifications">
-      <img src="../assets/icons/mail.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_messages">
-      <img src="../assets/icons/user.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg"  v-on:click="sb_accounts">
-      <img src="../assets/icons/zahnrad.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg" v-on:click="sb_settings">
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>