Added grid system to userprofile

src/components/BaseComponents/Menu.vue

@@ -31,7 +31,7 @@
                   Username
                 </a>
                 <ul class="dropdown-menu bg-success dropdown-username-content">
-                  <li><a class="dropdown-item text-white dropdown-username-link" href="/news" @click="toUserProfile">User Profile</a></li>
+                  <li><router-link class="dropdown-item text-white dropdown-username-link"  to="/profile">User Profile</router-link></li>
                   <li><a class="dropdown-item text-white dropdown-username-link" href="/news" @click="toSetting">Setting</a></li>
                   <li><a class="dropdown-item text-white dropdown-username-link" href="/news" @click="toFeedback">Feedback</a></li>
                 </ul>
@@ -81,7 +81,7 @@ function toFeedback(){
 }
 
 function toUserProfile(){
-  router.push('/news')
+  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 class="row">
+      <div class="col">
+        Streak
+      </div>
+      </div>
+      <div class="row">
+      <div class="col">
+        <img src="/src/assets/icons/dollar.png" class=" w-10" alt="dollar">
+        <p>Points: + </p>
+      </div>
+      </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,6 +2,7 @@
 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";
 
 const routes = [
   {
@@ -48,6 +49,11 @@ const routes = [
     name: 'login',
     component: LoginView,
   },
+  {
+    path: '/profile',
+    name: 'profile',
+    component: UserProfileView
+  },
   {
     path: '/:pathMatch(.*)*',
     redirect: { name: 'not-found' },

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