Profile page added

src/examples/navbars/NavbarDefault.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { RouterLink } from "vue-router";
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import { useWindowsWidth } from "../../assets/js/useWindowsWidth";
 
 // images
@@ -8,6 +8,8 @@ import ArrDark from "@/assets/img/down-arrow-dark.svg";
 import downArrow from "@/assets/img/down-arrow.svg";
 import DownArrWhite from "@/assets/img/down-arrow-white.svg";
 
+const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token')); // Computed property to check if the user is authenticated
+
 const props = defineProps({
   action: {
     type: Object,
@@ -298,7 +300,7 @@ watch(
 
 
 
-          <li class="nav-item dropdown dropdown-hover mx-2">
+          <li v-if="isAuthenticated" class="nav-item dropdown dropdown-hover mx-2">
             <a
               role="button"
               class="nav-link ps-2 d-flex cursor-pointer align-items-center"
@@ -333,7 +335,7 @@ watch(
                   <li class="nav-item list-group-item border-0 p-0">
                     <a
                       class="dropdown-item py-2 ps-3 border-radius-md"
-                      href=" http://localhost:3000/pages/landing-pages/basic"
+                      href="/ViewMyProfile"
                     >
                       <h6
                         class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
@@ -353,7 +355,7 @@ watch(
                 <div class="col-md-12 g-0">
                   <a
                     class="dropdown-item py-2 ps-3 border-radius-md"
-                    href="./pages/about-us.html"
+                    href="/ViewMyProfile"
                   >
                     <h6
                       class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"

src/views/LandingPages/Profile/AdmireProfile.vue

@@ -12,14 +12,30 @@ const profileData = ref([]);
 
 const getProfile = async () => {
     const profileDataRecieved = await axios.get(`http://somebodyhire.me/api/profile/${userId.value}/`);
-    profileData.value = profileDataRecieved.data;
+    profileData.value = processProfileData(profileDataRecieved.data);
+};
 
+const processProfileData = (data) => {
+    return {
+        ...data,
+        name: data.name || '🤷 No Name Provided',
+        location: data.location || '🌍 No Location Provided',
+        short_intro: data.short_intro || '📝 No Short Intro Provided',
+        bio: data.bio || '📘 No Bio Provided',
+        profile_image: data.profile_image || '📷 No Image Provided',
+        social_github: data.social_github || '👨‍💻 No Github Provided',
+        social_twitter: data.social_twitter || '🐦 No Twitter Provided',
+        social_vk: data.social_vk || '🔵 No VK Provided',
+        social_youtube: data.social_youtube || '▶️ No YouTube Provided',
+        social_website: data.social_website || '🌐 No Website Provided',
+    };
 };
 
 onMounted(async() => {
     await getProfile();
 });
 
+
 </script>
 
 <script>
@@ -31,10 +47,22 @@ onMounted(async() => {
 
 <template>
     <NavbarDefault />
-    <div>
-      <h1>Профиль пользователя {{ loggedUserName }} id {{ userId }}</h1>
-      <h2>{{ profileData.username }}</h2>
-        <p>{{ profileData.email }}</p>  
+    <div class="profile-container">
+      <h1>Профиль пользователя {{ loggedUserName }}</h1>
+        <h2>{{ profileData.username }}</h2>
+        <p>{{ profileData.email }}</p>
+        <P>Имя: {{ profileData.name }}</P>
+        <p>Местоположение: {{ profileData.location }}</p>
+        <p>Краткое описание: {{ profileData.short_intro }}</p>
+        <p>Биография: {{ profileData.bio }}</p>
+        <p>Ссылка на изображение: {{ profileData.profile_image }}</p>
+        <p>Ссылка на GitHub: {{ profileData.social_github }}</p>
+        <p>Ссылка на Twitter: {{ profileData.social_twitter }}</p>
+        <p>Ссылка на VK: {{ profileData.social_vk }}</p>
+        <p>Ссылка на YouTube: {{ profileData.social_youtube }}</p>
+        <p>Ссылка на сайт: {{ profileData.social_website }}</p>
+        
+
       
     </div>
   </template> 
@@ -42,4 +70,21 @@ onMounted(async() => {
 
 
 <style scoped>
+.profile-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 80%;
+  margin: auto;
+  padding: 20px;
+  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
+}
+
+.profile-container img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-bottom: 20px;
+}
 </style>