feat: Adding leaderboard and google icons

src/App.vue

@@ -14,5 +14,7 @@ import ErrorBoundaryCatcher from '@/components/Exceptions/ErrorBoundaryCatcher.v
 <style>
   main {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-weight: 600;
+
   }
 </style>
\ No newline at end of file

src/assets/icons/feedback.svg

+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M240-399h313v-60H240v60Zm0-130h480v-60H240v60Zm0-130h480v-60H240v60ZM80-80v-740q0-24 18-42t42-18h680q24 0 42 18t18 42v520q0 24-18 42t-42 18H240L80-80Zm134-220h606v-520H140v600l74-80Zm-74 0v-520 520Z" fill="#ffffff"/></svg>
\ No newline at end of file

src/assets/icons/leaderboard.svg

+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M140-180h187v-360H140v360Zm247 0h186v-600H387v600Zm246 0h187v-280H633v280ZM80-120v-480h247v-240h306v320h247v400H80Z" fill="#ffffff"/></svg>
\ No newline at end of file

src/assets/icons/logout.svg

+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h299v60H180v600h299v60H180Zm486-185-43-43 102-102H360v-60h363L621-612l43-43 176 176-174 174Z" fill="#ffffff"/></svg>
\ No newline at end of file

src/assets/icons/newsletter.svg

+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M140-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h680q24 0 42 18t18 42v600q0 24-18 42t-42 18H140Zm0-60h680v-600H140v600Zm109-106h462v-60H249v60Zm0-166h155v-222H249v222Zm259 0h203v-60H508v60Zm0-162h203v-60H508v60ZM140-180v-600 600Z" fill="#ffffff"/></svg>
\ No newline at end of file

src/assets/icons/person.svg

+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M480-481q-66 0-108-42t-42-108q0-66 42-108t108-42q66 0 108 42t42 108q0 66-42 108t-108 42ZM160-160v-94q0-38 19-65t49-41q67-30 128.5-45T480-420q62 0 123 15.5t127.921 44.694q31.301 14.126 50.19 40.966Q800-292 800-254v94H160Zm60-60h520v-34q0-16-9.5-30.5T707-306q-64-31-117-42.5T480-360q-57 0-111 11.5T252-306q-14 7-23 21.5t-9 30.5v34Zm260-321q39 0 64.5-25.5T570-631q0-39-25.5-64.5T480-721q-39 0-64.5 25.5T390-631q0 39 25.5 64.5T480-541Zm0-90Zm0 411Z" fill="#ffffff"/></svg>
\ No newline at end of file

src/assets/icons/saving.svg

+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M640-520q17 0 28.5-11.5T680-560q0-17-11.5-28.5T640-600q-17 0-28.5 11.5T600-560q0 17 11.5 28.5T640-520ZM320-620h200v-60H320v60ZM180-120q-34-114-67-227.5T80-580q0-92 64-156t156-64h200q29-38 70.5-59t89.5-21q25 0 42.5 17.5T720-820q0 6-1.5 12t-3.5 11q-4 11-7.5 22.5T702-751l91 91h87v279l-113 37-67 224H480v-80h-80v80H180Zm45-60h115v-80h200v80h115l63-210 102-35v-175h-52L640-728q1-25 6.5-48.5T658-824q-38 10-72 29.5T534-740H300q-66.286 0-113.143 46.857T140-580q0 103.158 29 201.579T225-180Zm255-322Z" fill="#ffffff"/></svg>
\ No newline at end of file

src/assets/icons/settings.svg

+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m388-80-20-126q-19-7-40-19t-37-25l-118 54-93-164 108-79q-2-9-2.5-20.5T185-480q0-9 .5-20.5T188-521L80-600l93-164 118 54q16-13 37-25t40-18l20-127h184l20 126q19 7 40.5 18.5T669-710l118-54 93 164-108 77q2 10 2.5 21.5t.5 21.5q0 10-.5 21t-2.5 21l108 78-93 164-118-54q-16 13-36.5 25.5T592-206L572-80H388Zm48-60h88l14-112q33-8 62.5-25t53.5-41l106 46 40-72-94-69q4-17 6.5-33.5T715-480q0-17-2-33.5t-7-33.5l94-69-40-72-106 46q-23-26-52-43.5T538-708l-14-112h-88l-14 112q-34 7-63.5 24T306-642l-106-46-40 72 94 69q-4 17-6.5 33.5T245-480q0 17 2.5 33.5T254-413l-94 69 40 72 106-46q24 24 53.5 41t62.5 25l14 112Zm44-210q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38Zm0-130Z" fill="#ffffff"/></svg>
\ No newline at end of file

src/assets/icons/storefront.svg

+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M840-519v339q0 24-18 42t-42 18H179q-24 0-42-18t-18-42v-339q-28-24-37-59t2-70l43-135q8-27 28-42t46-15h553q28 0 49 15.5t29 41.5l44 135q11 35 1.5 70T840-519Zm-270-31q29 0 49-19t16-46l-25-165H510v165q0 26 17 45.5t43 19.5Zm-187 0q28 0 47.5-19t19.5-46v-165H350l-25 165q-4 26 14 45.5t44 19.5Zm-182 0q24 0 41.5-16.5T263-607l26-173H189l-46 146q-10 31 8 57.5t50 26.5Zm557 0q32 0 50.5-26t8.5-58l-46-146H671l26 173q3 24 20.5 40.5T758-550ZM179-180h601v-311q1 1-6.5 1H758q-25 0-47.5-10.5T666-533q-16 20-40 31.5T573-490q-30 0-51.5-8.5T480-527q-15 18-38 27.5t-52 9.5q-31 0-55-11t-41-32q-24 21-47 32t-46 11h-13.5q-6.5 0-8.5-1v311Zm601 0H179h601Z" fill="#ffffff"/></svg>
\ No newline at end of file

src/components/BaseComponents/Footer.vue

 <template>
     <div>
-        <footer class="text-center text-white bg-danger-subtle" style="width: 100%">
+        <footer id = "footer" class="text-center text-white" style="width: 100%">
           <div class="text-center p-3">
             © 2024 Copyright: Anders Høvik, Andreas Svendsrud, Henrik Dybdal, Henrik Sandok, Jens Aanestad, Victor Kaste, Viktor Grevskott
           </div>
         </footer>
     </div>
 </template>
+
+<style scoped> #footer {background-color: #0A58CA;}</style>

src/components/BaseComponents/Menu.vue

 <template>
-    <nav class="navbar navbar-expand-lg bg-success">
-        <div class="container-fluid" >
+    <nav id="navBar" class="navbar navbar-expand-xl">
+        <div class="container-fluid">
             <a class="navbar-brand" href="/" @click="toHome">
-              <img src="/src/assets/Sparesti-logo.png" alt="Sparesti-logo" width="60">
+                <img id="logoImg" src="/src/assets/Sparesti-logo.png" alt="Sparesti-logo" width="60">
+                <span id="logo" class="text-white">Sparesti</span>
             </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                 data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
@@ -12,95 +13,158 @@
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
                 <ul class="navbar-nav ms-auto mb-2 mb-lg-0 ui-menu">
                     <li class="nav-item">
-                        <a class="nav-link text-white" href="/news" @click="toSavingGoals">Saving goals</a>
+                        <a class="nav-link text-white" href="#" @click="toSavingGoals"><img
+                                src="@/assets/icons/saving.svg">Saving goals</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link text-white" href="/news" @click="toLeaderboard">Leaderboard</a>
+                        <a class="nav-link text-white" href="#" @click="toLeaderboard"><img
+                                src="@/assets/icons/leaderboard.svg">Leaderboard</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link text-white" href="#" @click="toNews"><img
+                                src="@/assets/icons/newsletter.svg">News</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link text-white" href="#" @click="toStore"><img
+                                src="@/assets/icons/storefront.svg">Store</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle username-text text-white " href="#" role="button"
+                            data-bs-toggle="dropdown" aria-expanded="false">
+                            <img src="@/assets/icons/person.svg">Username
+                        </a>
+                        <ul class="dropdown-menu dropdown-username-content">
+                            <li><a class="dropdown-item text-white dropdown-username-link" href="#"
+                                    @click="toUserProfile"><img src="@/assets/icons/person.svg">User Profile</a></li>
+                            <li><a class="dropdown-item text-white dropdown-username-link" href="#"
+                                    @click="toSetting"><img src="@/assets/icons/settings.svg">Setting</a></li>
+                            <li><a class="dropdown-item text-white dropdown-username-link" href="#"
+                                    @click="toFeedback"><img src="@/assets/icons/feedback.svg">Feedback</a></li>
+                            <li><a class="dropdown-item text-white dropdown-username-link" href="#"
+                                    @click="toFeedback"><img src="@/assets/icons/logout.svg">Log out</a></li>
+                        </ul>
                     </li>
-                  <li class="nav-item">
-                    <a class="nav-link text-white" href="/news" @click="toNews">News</a>
-                  </li>
-                  <li class="nav-item">
-                    <a class="nav-link text-white" href="/news" @click="toStore">Store</a>
-                  </li>
-                </ul>
-              <nav class="navbar bg-success">
-              <div class="container-fluid">
-                <a class="nav-link dropdown-toggle username-text text-white " href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                  <img src="/src/assets/userprofile.png" alt="Userprofile" width="30" height="30" class="d-inline-block align-text-top">
-                  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><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>
-              </div>
-              </nav>
+
             </div>
         </div>
     </nav>
 </template>
 <script setup lang="ts">
-
-
-/**
- * May need to change from a-links to routerlinks to avoid complications with href.
- */
-
-import {useRouter} from "vue-router";
+import { useRouter } from "vue-router";
 
 const router = useRouter();
 
-function toHome(){
-  router.push('/')
+function toHome() {
+    router.push('/')
 }
 
-function toSavingGoals(){
-  router.push('/news')
+function toSavingGoals() {
+    router.push('/news')
 }
 
-function toLeaderboard(){
-  router.push('/news')
+function toLeaderboard() {
+    router.push('/news')
 }
 
-function toNews(){
-  router.push('/news')
+function toNews() {
+    router.push('/news')
 }
 
-function toStore(){
-  router.push('/news')
+function toStore() {
+    router.push('/news')
 }
 
-function toSetting(){
-  router.push('/news')
+function toSetting() {
+    router.push('/news')
 }
 
-function toFeedback(){
-  router.push('/news')
+function toFeedback() {
+    router.push('/news')
 }
 
-function toUserProfile(){
-  router.push('/news')
+function toUserProfile() {
+    router.push('/news')
 }
 
 
 </script>
 <style scoped>
-.ui-menu{
-  font-size: 150%;
+.navbar-brand {
+    display: flex;
+    align-items: center;
+}
+
+.navbar-toggler-icon {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
+}
+
+.nav-item {
+    padding: 0.3rem 0.6rem;
+    font-size: 1.7rem;
+}
+
+.nav-item:hover {
+    background-color: #2b6ac7;
 }
 
-.username-text{
-  font-size: 150%;
+.nav-item .dropdown {
+    display: flex;
+    justify-content: center;
+}
+
+.nav-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.dropdown-item {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.dropdown-menu {
+    background-color: #0A58CA;
+}
+
+.dropdown-username-link {
+    font-size: 1.7rem;
+    display: flex;
+    justify-self: center;
+}
+
+.dropdown-username-link:hover {
+    background-color: #2b6ac7;
+}
+
+#navBar {
+    background-color: #0A58CA;
+}
+
+.navbar {
+    display: flex;
+    align-items: center;
+}
+
+.container-fluid {
+    font-size: 1.7rem;
+}
 
+#logo {
+    font-size: 2.5rem;
+    height: 100%;
 }
 
-.dropdown-username-content{
-  font-size: 150%;
+.nav-link img {
+    margin-right: 5px;
 }
 
-.dropdown-username-link:hover{
-  background-color: #538d53
+#logoImg {
+    margin-right: 0.3rem;
+    width: 75px;
+    height: auto;
+    aspect-ratio: 1.3/1;
 }
 </style>
\ No newline at end of file

src/components/LeaderboardComponents/Leaderboard.vue

+<template>
+    <div id="leaderboard">
+      <div class="ribbon"></div>
+      <table>
+        <tr v-for="(entry, index) in leaderboard" :key="entry.user.id">
+          <td class="number">{{ index + 1 }}</td>
+          <td class="name" @click="navigateToUserProfile(entry.user.id)">{{ entry.user.username }}</td>
+          <td class="points" v-if="index === 0">
+            {{ entry.score }}
+            <div class = "medal">
+                <img class="gold-medal" src="https://github.com/malunaridev/Challenges-iCodeThis/blob/master/4-leaderboard/assets/gold-medal.png?raw=true" alt="gold medal" />
+            </div>
+        </td>
+        <td v-else class="points">{{ entry.score }}</td>
+        </tr>
+      </table>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref } from 'vue';
+  import { useRouter } from 'vue-router';
+  
+  const router = useRouter();
+  
+  const props = defineProps({
+    leaderboard: {
+      type: Array,
+      required: true
+    }
+  });
+  
+  const navigateToUserProfile = () => {
+    router.push({ name: 'news' });
+  };
+  </script>
+  
+  <style scoped>
+  #leaderboard {
+    width: 100%;
+    position: relative;
+  }
+  
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+    color: #141a39;
+    cursor: default;
+  }
+  
+  tr {
+    transition: all 0.2s ease-in-out;
+    border-radius: 0.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+  
+  tr:not(:first-child):hover {
+    background-color: #fff;
+    transform: scale(1.1);
+    -webkit-box-shadow: 0px 5px 15px 8px #e4e7fb;
+    box-shadow: 0px 5px 15px 8px #e4e7fb;
+  }
+  
+  tr:nth-child(even) {
+    background-color: #f9f9f9;
+  }
+  
+  tr:nth-child(1) {
+    color: #fff;
+  }
+  
+  td {
+    height: 2rem;
+    font-family: "Rubik", sans-serif;
+    font-size: 1.4rem;
+    padding: 1rem 2rem;
+    position: relative;
+  }
+  
+  .number {
+    width: 1rem;
+    font-size: 2.2rem;
+    font-weight: bold;
+    text-align: left;
+    display: flex;
+    align-items: center;
+  }
+  
+  .name {
+    font-size: 1.3rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+  
+  .points {
+    font-weight: bold;
+    font-size: 1.3rem;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  @media (max-width: 1000px) {
+    .number .name .points {
+      font-size: 0.5rem;
+    }
+
+    td {
+      padding: 0.2rem 0.5rem;
+    }
+  }
+
+  
+  .points:first-child {
+    width: 10rem;
+  }
+  
+  .gold-medal {
+    height: 3rem;
+    margin-left: 1.5rem;
+  }
+  
+  .ribbon {
+    width: 100%;
+    height: 4.5rem;
+    top: -0.5rem;
+    background-color: #0A58CA;
+    position: absolute;
+    left: -1rem;
+    box-shadow: 0px 15px 11px -6px #7a7a7d;
+  }
+  
+  .ribbon::before {
+    content: "";
+    height: 1.5rem;
+    width: 1.5rem;
+    bottom: -0.8rem;
+    left: 0.35rem;
+    transform: rotate(45deg);
+    background-color: #0A58CA;
+    position: absolute;
+    z-index: -1;
+  }
+  
+  .ribbon::after {
+    content: "";
+    height: 1.5rem;
+    width: 1.5rem;
+    bottom: -0.8rem;
+    right: 0.35rem;
+    transform: rotate(45deg);
+    background-color: #0A58CA;
+    position: absolute;
+    z-index: -1;
+  }
+  </style>
\ No newline at end of file

src/views/LeaderboardView.vue

+<template>
+    <main>
+        <div id="leaderboard">
+            <h1>Ranking</h1>
+            <Leaderboard :leaderboard="leaderboardData" @navigateToUserProfile="navigateToUserProfile" />
+        </div>
+    </main>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import Leaderboard from '@/components/LeaderboardComponents/Leaderboard.vue';
+
+let leaderboardData = ref([]);
+
+const router = useRouter();
+
+async function fetchQuizData() {
+    /*leaderboard(quizId).then((response) => {
+        leaderboardData.value = response.data.slice(0, 10);
+    }).catch((error) => {
+        console.error("Failed to fetch leaderboard data:", error);
+    });*/
+}
+
+const navigateToUserProfile = (userId: number) => {
+    router.push({ name: 'user', params: { id: userId } });
+};
+</script>
+
+<style scoped>
+main {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#leaderboard {
+    width: 60%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 3rem;
+}
+</style>
\ No newline at end of file