ui responsive gemacht

src/components/Home.vue

@@ -8,14 +8,14 @@ import Trending from "./home_components/trending.vue";
 
 
 <template>
-  <div id="main" class="flex">
-    <div id="left" class="w-72">
+  <div id="main" class="flex md:flex-col">
+    <div id="left" class="w-72 min-w-72 md:full">
       <navigationbar></navigationbar>
     </div>
-    <div class="w-100p">
+    <div class="w-100p sm:w-screen">
       <feed></feed>
     </div>
-    <div class="w-1/4">
+    <div class="w-1/4 sm:w-screen">
       <contacts></contacts>
       <legal></legal>
     </div>

src/components/home_components/feed.vue

@@ -106,9 +106,9 @@ onMounted(async () => {
       <!-- POSTING-->
       <div class="flex border-2 border-b-grau2">
         <img src="../../assets/danielvici_pp.png" alt="" class="p-2 rounded-full w-16 h-16">
-        <form>
+        <form class="w-full pr-5">
           <!-- post_publish ist richtig aber wird falsch angezeigt. File Input geht nicht-->
-          <textarea v-model="pust_create_text" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-200p resize-none" rows="3" placeholder="Write something..."></textarea>
+          <textarea v-model="pust_create_text" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-full resize-none" rows="3" placeholder="Write something..."></textarea>
           <div class="">
             <input class="text-weiss" type="file" accept=".png, .jpg, .jpeg">
             <button id="post_publish" name="post_publishss" class="text-weiss p-1 m-2 rounded-lg py-3 px-5 bg-button-farbe" @click.prevent="post_create(pust_create_text, )" type="button">Post</button>

src/components/home_components/navigationbar.vue

@@ -3,10 +3,39 @@
 // home -> app.vue
 // PLACEHOLDER
 import router from "../../router";
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 
-let self = ref("danielvici123");
+let self = localStorage.getItem("self_id");
+const isMobile = ref(false);
+const show = ref(false);
 
+
+const getShowMobileElements = () => {
+  const value = localStorage.getItem("mobile");
+  return value === 'true';
+};
+
+const setShowMobileElements = (value) => {
+  localStorage.setItem("mobile", value.toString());
+};
+
+const toggleElements = () => {
+  show.value = !show.value;
+  setShowMobileElements(show.value); // Zustand im localStorage speichern
+};
+
+const checkScreenWidth = () => {
+  isMobile.value = window.innerWidth < 640;
+};
+
+onMounted(() => {
+  checkScreenWidth();
+  window.addEventListener('resize', checkScreenWidth);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkScreenWidth);
+});
 </script>
 
 <template>
@@ -14,7 +43,10 @@ let self = ref("danielvici123");
     <div class="items-center flex justify-center"><!-- BILD-->
       <img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto hover:shadow-2xl hover:shadow-grau-dunkel"  @click="router.push('/')">
     </div>
-    <div class="align-middle space-y-3 pt-4 pl-3 pb-4 pr-4 font-bold text-xl"> <!-- Icons (Bild) und Text                                  Damit der Text weiß ist muss zwei mal gedrückt werden manchmal-->
+    <div class="sm:hidden text-weiss items-center flex justify-center mt-2 py-4 border-y-2 border-y-grau2 " v-if="isMobile">
+      <button @click="toggleElements"> {{ show ? 'close navbar' : 'expand navbar' }} </button>
+    </div>
+    <div class="align-middle space-y-3 pt-4 pl-3 pb-4 pr-4 font-bold text-xl" v-if="show || !isMobile"> <!-- Icons (Bild) und Text                                  Damit der Text weiß ist muss zwei mal gedrückt werden manchmal-->
       <label class="flex text-center text-grau2 hover:bg-logo-farbe-lila rounded-lg" @click="router.push('/')"><img class="mr-2 p-1 bg-logo-farbe-lila rounded-lg" src="../../assets/icons/home.png" alt=""> Home</label>
       <label class="flex text-center text-grau2 hover:bg-logo-farbe-lila rounded-lg" @click="router.push('/search')">        <img class="mr-2 p-1 bg-logo-farbe-lila rounded-lg" src="../../assets/icons/lupe.png" alt="">Search</label>
       <label class="flex text-center text-grau2 hover:bg-logo-farbe-rot  rounded-lg" @click="router.push('/notifications')"> <img class="mr-2 p-1 bg-logo-farbe-rot  rounded-lg" src="../../assets/icons/glocke.png" alt="">Notifications</label>

src/components/login_components/login_comp.vue

@@ -30,11 +30,10 @@ async function login(event: Event) {
     });
 
     if (response.status === 200) {
+      const data = await response.json();
       localStorage.setItem('isLoggedIn', 'true');
       localStorage.setItem('username', username.value);
-      localStorage.setItem('self_id', response["userId"]);
-      console.log("self_id: " + response["userId"]);
-      console.log(response);
+      localStorage.setItem('self_id', data["userId"]);
       alert("You will be now redirected");
       router.push('/');
     } else {

src/components/register_components/register_main.vue

@@ -31,11 +31,11 @@ async function register() {
 
 
     if (response["status"] == 200) {
-      alert("Account created! You will be now redirected");
+      const data = await response.json();
       localStorage.setItem('isLoggedIn', 'true');
       localStorage.setItem('username', username.value);
-      localStorage.setItem('self_id', response["userId"]);
-      console.log("self_id: " + response["userId"]);
+      localStorage.setItem('self_id', data["userId"]);
+      alert("Account created! You will be now redirected");
       router.push('/');
       router.go(1);
     } else {