Merge branch 'feature/profile-layout' into 'main'

Feature/profile layout

See merge request !12

src/components/BaseComponents/Menu.vue

@@ -45,7 +45,6 @@
                         </ul>
                     </li>
                 </ul>
-
             </div>
         </div>
     </nav>
@@ -83,8 +82,9 @@ function toFeedback() {
     router.push('/news')
 }
 
-function toUserProfile() {
-    router.push('/news')
+
+function toUserProfile(){
+  router.push('/profile')
 }
 
 

src/components/UserProfile/UserProfileLayout.vue

+<script setup lang="ts">
+
+import Menu from "@/components/BaseComponents/Menu.vue";
+import Footer from "@/components/BaseComponents/Footer.vue";
+
+let points = 0;
+let streak = 0;
+</script>
+
+<template>
+  <Menu></Menu>
+    <div class="container text-center">
+    <div class="row">
+      <div class="col">
+        <img src="/src/assets/userprofile.png" class="img-fluid">
+        <p class="h2">Username</p>
+        <p><a class="link-dark" href="#">Edit profile</a></p>
+      </div>
+    </div>
+      <div class="row">
+        <div class="col">
+          <img src="/src/assets/icons/fire.png" class="img-fluid" style="width: 30px; height: 30px" alt="dollar">
+          <p>Streak: 10</p>
+        </div>
+      </div>
+      <div class="row">
+      <div class="col-12">
+        <img src="/src/assets/icons/dollar.png" class="img-fluid" style="width: 30px; height: 30px" alt="dollar">
+        <p class="">Points: 2000 </p>
+      </div>
+      </div>
+
+    <div class="row">
+      <div class="col">
+        total points earned
+      </div>
+      <div class="col">
+        total badges earned
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        History
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        Your Badges
+      </div>
+    </div>
+  </div>
+  <Footer></Footer>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/router/index.ts

@@ -2,8 +2,10 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import LoginView from '../views/Authentication/LoginView.vue';
 import { useUserInfoStore } from '@/stores/UserStore';
+import UserProfileView from "@/views/User/UserProfileView.vue";
 import SignUp from '@/components/SignUp/SignUp.vue'
 
+
 const routes = [
   {
     path: '/',
@@ -69,6 +71,11 @@ const routes = [
     name: 'login',
     component: LoginView,
   },
+  {
+    path: '/profile',
+    name: 'profile',
+    component: UserProfileView
+  },
   {
     path: '/sign-up',
     name: 'sign up',

src/views/User/UserProfileView.vue

+<script setup lang="ts">
+
+import UserProfileLayout from "@/components/UserProfile/UserProfileLayout.vue";
+</script>
+
+<template>
+<UserProfileLayout></UserProfileLayout>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file