From 5a5cf84197462552a20df2b1fa1455a0f0c452d3 Mon Sep 17 00:00:00 2001
From: danielvici123 <94993276+danielvici@users.noreply.github.com>
Date: Wed, 26 Mar 2025 15:51:17 +0100
Subject: [PATCH] ui responsive gemacht

---
 src/components/Home.vue                       |  8 ++--
 src/components/home_components/feed.vue       |  4 +-
 .../home_components/navigationbar.vue         | 38 +++++++++++++++++--
 .../login_components/login_comp.vue           |  5 +--
 .../register_components/register_main.vue     |  6 +--
 5 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/src/components/Home.vue b/src/components/Home.vue
index 1898309..50b481d 100644
--- a/src/components/Home.vue
+++ b/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>
diff --git a/src/components/home_components/feed.vue b/src/components/home_components/feed.vue
index 584e3c7..a4c105c 100644
--- a/src/components/home_components/feed.vue
+++ b/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>
diff --git a/src/components/home_components/navigationbar.vue b/src/components/home_components/navigationbar.vue
index 10e7525..a551896 100644
--- a/src/components/home_components/navigationbar.vue
+++ b/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>
diff --git a/src/components/login_components/login_comp.vue b/src/components/login_components/login_comp.vue
index 2d872ac..25031cc 100644
--- a/src/components/login_components/login_comp.vue
+++ b/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 {
diff --git a/src/components/register_components/register_main.vue b/src/components/register_components/register_main.vue
index 77c666a..1dd5892 100644
--- a/src/components/register_components/register_main.vue
+++ b/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 {