🚧 🐛 work in responsive

Carol-88 · May 14, 2024 · 95fca65 · 95fca65
1 parent 111f948
commit 95fca65
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 42 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -47,6 +47,13 @@ html {
   margin: auto;
 }
 
+nav {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 95%;
+  justify-content: flex-end;
+}
 button {
   width: 100%;
   padding: 10px;

diff --git a/src/components/DashboardButtonComponent.vue b/src/components/DashboardButtonComponent.vue
@@ -13,12 +13,3 @@ const goToDashboard = () => {
   router.push({ path: "/dashboard" });
 };
 </script>
-
-<style scoped>
-.container-btn {
-  position: absolute;
-  top: 10px;
-  right: 241px;
-  width: 104px;
-}
-</style>
diff --git a/src/components/LogoutComponent.vue b/src/components/LogoutComponent.vue
@@ -22,11 +22,3 @@ const handleLogout = async () => {
   }
 };
 </script>
-
-<style scoped>
-.logout-container {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-}
-</style>
diff --git a/src/components/NavComponent.vue b/src/components/NavComponent.vue
@@ -15,3 +15,24 @@ import ProfileButtonComponent from "@/components/ProfileButtonComponent.vue";
 import DashboardButtonComponent from "@/components/DashboardButtonComponent.vue";
 import UserCardComponent from "@/components/UserCardComponent.vue";
 </script>
+
+<style scoped>
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+@media (max-width: 768px) {
+  nav {
+    flex-direction: column;
+  }
+
+  ul {
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/src/components/ProfileButtonComponent.vue b/src/components/ProfileButtonComponent.vue
@@ -13,12 +13,3 @@ const goToProfile = () => {
   router.push({ path: "/profile" });
 };
 </script>
-
-<style scoped>
-.container-btn {
-  position: absolute;
-  top: 10px;
-  right: 126px;
-  width: 104px;
-}
-</style>
diff --git a/src/components/UserCardComponent.vue b/src/components/UserCardComponent.vue
@@ -22,18 +22,13 @@ const { profile } = storeToRefs(userStore);
   gap: 1rem;
   border-radius: 8px;
   padding: 16px;
-  margin-top: 16px;
   width: 200px;
-  position: absolute;
   height: 60px;
   text-align: center;
   background-color: #ffffff;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  left: 27px;
-  top: 0px;
+  justify-content: space-around;
+  align-items: flex-end;
 }
 
 img {

diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
@@ -133,14 +133,9 @@ section {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 4rem;
   height: 100vh;
 }
 
-nav {
-  display: flex;
-  flex-direction: row;
-}
 ul {
   margin: 0;
   padding: 0;

diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
@@ -42,10 +42,6 @@ const updateProfile = async () => {
 </script>
 
 <style scoped>
-section {
-  padding-top: 4rem;
-}
-
 p {
   font-weight: 600;
 }