diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue
index dfeed72845ac0ffd326b2f7d60fe6f8b572ff5a8..62cb230905705022153d26ddd20449d532782f4f 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/src/components/BaseComponents/NavBar.vue
@@ -1,36 +1,42 @@
<template>
- <nav id="navBar" class="navbar navbar-expand-xl">
- <div class="container-fluid">
- <router-link class="navbar-brand" id="home" :to="toSavingGoals()">
- <img id="logoImg" src="/src/assets/Sparesti-logo.png" alt="Sparesti-logo" width="60">
- <span id="logo" class="text-white">SpareSti</span>
+ <nav id="navBar" class="navbar navbar-expand-xl">
+ <div class="container-fluid">
+ <router-link class="navbar-brand" id="home" :to="toSavingGoals()">
+ <img id="logoImg" src="/src/assets/Sparesti-logo.png" alt="Sparesti-logo" width="60">
+ <span id="logo" class="text-white">SpareSti</span>
+ </router-link>
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+ data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+ aria-expanded="false" aria-label="Bytt navigasjon">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <ul class="navbar-nav ms-auto mb-2 mb-lg-0 ui-menu">
+ <li class="nav-item">
+ <router-link data-cy="savingGoals" class="nav-link text-white"
+ :to="toSavingGoals()" exact-active-class="active-nav">
+ <img src="@/assets/icons/saving.svg">Sparemål
</router-link>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
- data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
- aria-label="Bytt navigasjon">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarSupportedContent">
- <ul class="navbar-nav ms-auto mb-2 mb-lg-0 ui-menu">
- <li class="nav-item">
- <router-link data-cy="savingGoals" class="nav-link text-white"
- :to="toSavingGoals()"><img
- src="@/assets/icons/saving.svg">Sparemål</router-link>
- </li>
- <li class="nav-item">
- <router-link data-cy="leaderboard" class="nav-link text-white"
- :to="toLeaderboard()"><img
- src="@/assets/icons/leaderboard.svg">Ledertavle</router-link>
- </li>
- <li class="nav-item">
- <router-link data-cy="news" class="nav-link text-white" :to="toNews()"><img
- src="@/assets/icons/newsletter.svg">Nyheter</router-link>
- </li>
- <li class="nav-item">
- <router-link data-cy="store" class="nav-link text-white" :to="toStore()"><img
- src="@/assets/icons/storefront.svg">Butikk</router-link>
- </li>
- <li class="nav-item dropdown">
+ </li>
+ <li class="nav-item">
+ <router-link data-cy="leaderboard" class="nav-link text-white"
+ :to="toLeaderboard()" exact-active-class="active-nav">
+ <img src="@/assets/icons/leaderboard.svg">Ledertavle
+ </router-link>
+ </li>
+ <li class="nav-item">
+ <router-link data-cy="news" class="nav-link text-white"
+ :to="toNews()" exact-active-class="active-nav">
+ <img src="@/assets/icons/newsletter.svg">Nyheter
+ </router-link>
+ </li>
+ <li class="nav-item">
+ <router-link data-cy="store" class="nav-link text-white"
+ :to="toStore()" exact-active-class="active-nav">
+ <img src="@/assets/icons/storefront.svg">Butikk
+ </router-link>
+ </li>
+ <li class="nav-item dropdown">
<a data-mdb-dropdown-init class=" nav-link dropdown-toggle hidden-arrow notification" href="#" id="navbarDropdownMenuLink"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="/src/assets/icons/bell-white.svg">
@@ -42,7 +48,7 @@
class="d-flex align-items-center"
@click="readNotification(item)">
<div class="flex-shrink-0">
- <img :src="notificationImageMapper[String(item.notificationType)]" alt="Varslingsikon" class="notification-icon">
+ <img :src="notificationImageMapper[String(item.notificationType)]" alt="Varslingsikon" class="notification-icon">
</div>
<div class="flex-grow-1 ms-3">
<div class="not-item dropdown-item">{{item.message}}</div>
@@ -54,47 +60,102 @@
<li>Ingen varslinger</li>
</ul>
</li>
- <li v-if="userStore.isLoggedIn" class="nav-item dropdown">
- <a data-cy="user"
- 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">{{useUserInfoStore().firstname }}
- </a>
- <ul class="dropdown-menu dropdown-username-content">
- <li><router-link data-cy="profile"
- class="dropdown-item dropdown-username-link" :to="toUserProfile()"><img
- src="@/assets/icons/black_person.svg">Min profil</router-link></li>
- <li v-if="useUserInfoStore().isPremium"><router-link data-cy="budget"
- class="dropdown-item dropdown-username-link" :to="toBudget()"><img
- src="@/assets/icons/budget.svg">Budjsett</router-link></li>
- <li><router-link data-cy="friends"
- class="dropdown-item dropdown-username-link" :to="toFriends()"><img
- src="@/assets/icons/black_friends.svg">Venner</router-link></li>
- <li><router-link data-cy="settings"
- class="dropdown-item dropdown-username-link" :to="toSetting()"><img
- src="@/assets/icons/settings.svg">Innstillinger</router-link></li>
- <li><router-link data-cy="feedback"
- class="dropdown-item dropdown-username-link" :to="toFeedback()"><img
- src="@/assets/icons/feedback.svg">Tilbakemelding</router-link></li>
- <li><router-link data-cy="admin"
- class="dropdown-item dropdown-username-link" :to="toSetting()"><img
- src="@/assets/icons/admin.svg">Admin</router-link></li>
- <li style="cursor: pointer"><a data-testid="logout" class="dropdown-item dropdown-username-link" ref="#" @click="toLogout()"><img
- src="@/assets/icons/logout.svg">Logg ut</a></li>
- </ul>
- </li>
- <li v-else class="nav-item">
- <a class="nav-link" style="cursor: pointer;" href="#" @click="toLogout">Logg inn</a>
- </li>
- </ul>
- </div>
- </div>
- </nav>
+ <li v-if="userStore.isLoggedIn" class="nav-item dropdown">
+
+
+ <a
+ data-cy="user"
+ :class="['nav-link', 'dropdown-toggle', 'username-text', 'text-white', { 'underline-active': !isAnyActivePage() }]"
+ href="#"
+ role="button"
+ data-bs-toggle="dropdown"
+ aria-expanded="false">
+ <img src="@/assets/icons/person.svg">{{ useUserInfoStore().firstname }}
+</a>
+
+ <ul class="dropdown-menu dropdown-username-content">
+
+
+ <li>
+ <router-link data-cy="profile"
+ class="dropdown-item dropdown-username-link"
+ :to="toUserProfile()"
+ exact-active-class="active-link"
+ @click="toggleDropdown">
+ <img src="@/assets/icons/black_person.svg">Min profil
+ </router-link>
+ </li>
+ <li v-if="useUserInfoStore().isPremium">
+ <router-link data-cy="budget"
+ class="dropdown-item dropdown-username-link"
+ :to="toBudget()"
+ exact-active-class="active-link"
+ @click="toggleDropdown">
+ <img src="@/assets/icons/budget.svg">Budjsett
+ </router-link>
+ </li>
+ <li>
+ <router-link data-cy="friends"
+ class="dropdown-item dropdown-username-link"
+ :to="toFriends()"
+ exact-active-class="active-link"
+ @click="toggleDropdown">
+ <img src="@/assets/icons/black_friends.svg">Venner
+ </router-link>
+ </li>
+ <li>
+ <router-link data-cy="settings"
+ class="dropdown-item dropdown-username-link"
+ :to="toSetting()"
+ exact-active-class="active-link"
+ @click="toggleDropdown">
+ <img src="@/assets/icons/settings.svg">Innstillinger
+ </router-link>
+ </li>
+ <li>
+ <router-link data-cy="feedback"
+ class="dropdown-item dropdown-username-link"
+ :to="toFeedback()"
+ exact-active-class="active-link"
+ @click="toggleDropdown">
+ <img src="@/assets/icons/feedback.svg">Tilbakemelding
+ </router-link>
+ </li>
+ <li>
+ <router-link data-cy="admin"
+ class="dropdown-item dropdown-username-link"
+ :to="toSetting()"
+ exact-active-class="active-link"
+ @click="toggleDropdown">
+ <img src="@/assets/icons/admin.svg">Admin
+ </router-link>
+ </li>
+ <li style="cursor: pointer">
+ <a data-testid="logout"
+ class="dropdown-item dropdown-username-link"
+ href="#"
+ @click="toLogout()">
+ <img src="@/assets/icons/logout.svg">Logg ut
+ </a>
+ </li>
+
+
+ </ul>
+ </li>
+ <li v-else class="nav-item">
+ <a class="nav-link" style="cursor: pointer;" href="#"
+ @click="toLogout">Logg inn
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </nav>
</template>
+
<script setup lang="ts">
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
import { useUserInfoStore } from '@/stores/UserStore';
import {onMounted, ref} from "vue";
import { type NotificationDTO, NotificationService } from '@/api'
@@ -103,6 +164,7 @@ import { afterWrite } from '@popperjs/core'
const router = useRouter();
+const route = useRoute();
const userStore: any = useUserInfoStore();
@@ -114,16 +176,25 @@ if (useUserInfoStore().profileImage !== 0) {
profileImage = 'src/assets/userprofile.png';
}
-//Hashmap that contains the path to the Badges, The Friend, The dashboard etc.
-//The key value pair is the message of the notification and the path of the route
-/*
-
- */
let path = ref('#');
let notificationListRef = ref<NotificationDTO[]>([]);
+
+ function isAnyActivePage() {
+ const activeRoutes = ['/roadmap', '/leaderboard', '/news', '/shop']; // Add other pages here
+ return activeRoutes.includes(route.path);
+}
+
+function toggleDropdown(event: any) {
+ const dropdownMenu = event.target.closest('.dropdown-menu');
+ if (dropdownMenu) {
+ dropdownMenu.classList.remove('show');
+ }
+}
+
+
const notificationImageMapper: any = {
"FRIEND_REQUEST": "/src/assets/userprofile.png",
"BADGE": "/src/assets/icons/medal.png",
@@ -247,6 +318,26 @@ onMounted(() => {
font-size: 1.7rem;
}
+.active-nav {
+ border-radius: 0rem;
+ border-bottom: 4px solid #f3f3f3;
+}
+
+.active-link {
+ background-color: #f3f3f6;
+ border-bottom: 3px solid #01476b;
+}
+
+.underline-active {
+ border-bottom: 4px solid white;
+}
+
+.dropdown-item img {
+ height: 35px;
+ width: 35px;
+ margin-right: 5px;
+}
+
.nav-item:hover {
background-color: #01476b;
border-radius: 1rem;
diff --git a/src/components/Friends/UserFriends.vue b/src/components/Friends/UserFriends.vue
index 1858195a3e056672c5f1f13120c03358b626b8e4..d97189bedc05e1d1f590bce0233249732dc824bd 100644
--- a/src/components/Friends/UserFriends.vue
+++ b/src/components/Friends/UserFriends.vue
@@ -95,7 +95,7 @@
</div>
<div class="col-md-7 col-sm-7">
<h5><a href="#" class="profile-link" @click="toUserProfile(user.id)">{{
- user.firstName }}</a>
+ user.firstName }} {{ user.lastName }}</a>
</h5>
</div>
<div class="col-md-3 col-sm-3">
diff --git a/src/components/Leaderboard/LeaderboardRank.vue b/src/components/Leaderboard/LeaderboardRank.vue
index 07f88f352b3f757e9683b273cdeb8938ab923284..b3432f49675eefd694e027b6d55c738eddc47b93 100644
--- a/src/components/Leaderboard/LeaderboardRank.vue
+++ b/src/components/Leaderboard/LeaderboardRank.vue
@@ -37,7 +37,7 @@
</div>
<div id="communityContainer">
<h1>Totale poeng opptjent som et fellesskap</h1>
- <h2>1000000 <img src="../../assets/items/v-buck.png" style="width: 2rem" alt="alt"></h2>
+ <h2>{{communityPoints}} <img src="../../assets/items/pigcoin.png" style="width: 2rem" alt="alt"></h2>
</div>
</template>
@@ -56,10 +56,15 @@ let streakLeaderboardDataExtra = ref([] as any);
let currentLeaderboardDataExtra = ref([] as any);
let pointsLeaderboardDataExtra = ref([] as any);
+let communityPoints = ref(0);
+
const router = useRouter();
async function fetchQuizData() {
await global();
+
+ const response = await LeaderboardService.getTotalPoints();
+ communityPoints.value = response;
}
onMounted(() => {
diff --git a/src/components/Login/LoginForm.vue b/src/components/Login/LoginForm.vue
index 3b0518e2c2087f23529fb51ac728cd4b4c5050d3..f0ca531608a6ec0bc966fffe6223f51a5c7629b8 100644
--- a/src/components/Login/LoginForm.vue
+++ b/src/components/Login/LoginForm.vue
@@ -69,7 +69,7 @@ const handleSubmit = async () => {
console.log(response.token)
- await router.push({ name: 'home' });
+ await router.push({ name: 'roadmap' });
} catch (error: any) {
errorMsg.value = handleUnknownError(error);
isSubmitting.value = false;
diff --git a/src/components/Settings/SettingsProfile.vue b/src/components/Settings/SettingsProfile.vue
index c45371b6e47382aeb3f3a402a65791700be2f6b5..6d083ff4f9f60eba55a1e33ef3eb05aa6651c159 100644
--- a/src/components/Settings/SettingsProfile.vue
+++ b/src/components/Settings/SettingsProfile.vue
@@ -12,6 +12,8 @@ const passwordRef = ref('')
const formRef = ref()
let samePasswords = ref(true)
+const imageRange = ref([10, 11, 12, 13, 14, 15]);
+
const iconSrc = ref('../src/assets/userprofile.png');
const fileInputRef = ref();
@@ -58,13 +60,11 @@ async function setupForm() {
try {
const response = await UserService.getUser();
console.log(response.firstName)
-
firstNameRef.value = response.firstName;
if (response.lastName != null) {
surnameRef.value = response.lastName;
}
- console.log(response.profileImage)
- if(response.profileImage != null){
+ if (response.profileImage != null) {
iconSrc.value = "http://localhost:8080/api/images/" + response.profileImage;
} else {
iconSrc.value = "../src/assets/userprofile.png";
@@ -107,31 +107,36 @@ onMounted(() => {
<div class="user-avatar">
<input type="file" ref="fileInputRef" @change="handleFileChange" accept=".jpg, .jpeg, .png"
style="display: none;" />
- <img :src="iconSrc" alt="Brukeravatar" style="width: 300px">
+ <img :src="iconSrc" alt="Brukeravatar" style="width: 200px; height: 200px;">
<div class="mt-2">
<button type="button" class="btn btn-primary" @click="triggerFileUpload"><img
src="../../assets/icons/download.svg"> Last opp bilde</button>
</div>
</div>
<div class="form-group">
- <BaseInput data-cy="first-name" :model-value="firstNameRef"
- @input-change-event="handleFirstNameInputEvent" id="firstNameInputChange"
- input-id="first-name-new" type="text" label="Fornavn" placeholder="Skriv inn ditt fornavn"
- invalid-message="Vennligst skriv inn ditt fornavn" />
+ <BaseInput data-cy="first-name" :model-value="firstNameRef" @input-change-event="handleFirstNameInputEvent"
+ id="firstNameInputChange" input-id="first-name-new" type="text" label="Fornavn"
+ placeholder="Skriv inn ditt fornavn" invalid-message="Vennligst skriv inn ditt fornavn" />
</div>
<br>
<div class="form-group">
- <BaseInput data-cy="last-name" :model-value="surnameRef"
- @input-change-event="handleSurnameInputEvent"
- id="surnameInput-change"
- input-id="surname-new" type="text" label="Etternavn"
- placeholder="Skriv inn ditt etternavn"
- invalid-message="Vennligst skriv inn ditt etternavn" />
+ <BaseInput data-cy="last-name" :model-value="surnameRef" @input-change-event="handleSurnameInputEvent"
+ id="surnameInput-change" input-id="surname-new" type="text" label="Etternavn"
+ placeholder="Skriv inn ditt etternavn" invalid-message="Vennligst skriv inn ditt etternavn" />
</div>
<br>
<button data-cy="profile-submit-btn" type="submit" class="btn btn-primary">Oppdater
profil</button>
</form>
+ <hr>
+ <div>
+ <h6>Stilsett din profil banner</h6>
+ <div class="bannerHolder">
+ <div v-for="x in imageRange" :key="x">
+ <img :src="'http://localhost:8080/api/images/' + x" style="width: 400px; height: 40px; margin: 10px">
+ </div>
+ </div>
+ </div>
</div>
</template>
@@ -144,4 +149,11 @@ onMounted(() => {
-moz-border-radius: 100px;
border-radius: 100px;
}
+
+.bannerHolder {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ margin-top: 20px;
+}
</style>
\ No newline at end of file
diff --git a/src/components/UserProfile/MyProfile.vue b/src/components/UserProfile/MyProfile.vue
index a1d386d9c319e0aeeffbbcf8130d09cfe88d84c7..7a10b3eab7904de7f0e12eb5b5fcaab5113f2929 100644
--- a/src/components/UserProfile/MyProfile.vue
+++ b/src/components/UserProfile/MyProfile.vue
@@ -2,7 +2,7 @@
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useUserInfoStore } from "../../stores/UserStore";
-import { UserService } from "@/api";
+import { UserService, BadgeService } from "@/api";
import { ItemService } from "@/api";
let numberOfHistory = 6;
@@ -13,6 +13,7 @@ const imageUrl = ref(`../src/assets/userprofile.png`);
const router = useRouter();
const inventory = ref([] as any);
+const badges = ref([] as any);
const backgroundName = ref("");
async function setupForm() {
@@ -26,6 +27,7 @@ async function setupForm() {
imageUrl.value = "http://localhost:8080/api/images/" + response.profileImage;
}
getInventory();
+ getBadges();
} catch (err) {
console.error(err)
}
@@ -40,6 +42,15 @@ const getInventory = async () => {
}
}
+const getBadges = async () => {
+ try {
+ const responseBadge = await BadgeService.getBadgesUnlockedByUser();
+ badges.value = responseBadge;
+ } catch (error) {
+ console.log(error);
+ }
+}
+
const selectItem = (item: any) => {
backgroundName.value = item.itemName;
useUserInfoStore().setUserInfo({
@@ -55,6 +66,8 @@ const toRoadmap = () => {
router.push('/');
};
+
+
// Function to navigate to update user settings
const toUpdateUserSettings = () => {
router.push('/settings/profile');
@@ -80,7 +93,7 @@ const toUpdateUserSettings = () => {
data-mdb-ripple-color="dark" style="z-index: 1; height: 40px; margin-left: 17px" id="toUpdate" @click="toUpdateUserSettings">
Rediger profil
</button>
-
+
</div>
<div>
<p class="mb-1 h2" data-cy="points">253 <img src="@/assets/items/pigcoin.png" style="width: 4rem"></p>
@@ -92,12 +105,13 @@ const toUpdateUserSettings = () => {
</div>
</div>
</div>
+ <hr>
<div class="card-body p-1 text-black">
<div class="row">
<div class="col">
<div class="container-fluid">
- <h1 class="mt-5 text-start badges-text">Lageret ditt</h1>
- <div class="scrolling-wrapper-badges row flex-row flex-nowrap mt-4 pb-4 pt-2">
+ <h1 class="mt-1 text-start badges-text">Lageret ditt</h1>
+ <div class="scrolling-wrapper-badges row flex-row flex-nowrap mt-2 pb-2 pt-2">
<div v-for="product in inventory" :key="product.id" class="card text-center"
style="width: 12rem; border: none; cursor: pointer; margin: 1rem; border: 2px solid black" @click="selectItem(product)">
<img :src="`http://localhost:8080/api/images/${product.imageId}`" class="card-img-top"
@@ -112,52 +126,35 @@ const toUpdateUserSettings = () => {
</div>
</div>
</div>
+ <hr>
<div class="card-body p-1 text-black">
<div class="row">
<div class="col">
<div class="container-fluid">
- <h1 class="mt-5 text-start badges-text">Merker</h1>
- <div class="scrolling-wrapper-badges row flex-row flex-nowrap mt-4 pb-4 pt-2">
-
- <div class="col-5">
- <div class="card badges-block card-1"></div>
- </div>
- <div class="col-5">
- <div class="card badges-block card-2"></div>
- </div>
- <div class="col-5">
- <div class="card badges-block card-3"></div>
- </div>
- <div class="col-5">
- <div class="card badges-block card-4"></div>
- </div>
- <div class="col-5">
- <div class="card badges-block card-5"></div>
- </div>
- <div class="col-5">
- <div class="card badges-block card-6"></div>
- </div>
- <div class="col-5">
- <div class="card badges-block card-7"></div>
- </div>
- <div class="col-5">
- <div class="card badges-block card-8"></div>
- </div>
- <div class="col-5">
- <div class="card badges-block card-9"></div>
- </div>
- <div class="col-5">
- <div class="card badges-block card-10"></div>
+ <h1 class="mt-1 text-start badges-text">Merker</h1>
+ <div class="scrolling-wrapper-badges row flex-row flex-nowrap mt-2 pb-2 pt-2">
+
+ <div v-for="badge in badges" :key="badge.id" class="card text-center"
+ style="width: 12rem; border: none; cursor: pointer; margin: 1rem;
+ border: 2px solid black" data-bs-toggle="tooltip" data-bs-placement="top"
+ data-bs-custom-class="custom-tooltip" :data-bs-title="badge.criteria">
+ <img :src="`http://localhost:8080/api/images/${badge.imageId}`" class="card-img-top"
+ alt="..." />
+ <div class="card-body">
+ <h5 class="card-title">{{ badge.badgeName }}</h5>
+ </div>
</div>
+
</div>
</div>
</div>
</div>
+ <hr>
<div class="row">
<div class="col">
<!-- Her er historikken over lagrede mål -->
<div class="container-fluid mb-5">
- <h1 class="mt-5 text-start history-text">Historie</h1>
+ <h1 class="mt-1 text-start history-text">Historie</h1>
<div class="row scrolling-wrapper-history">
<div v-for="index in numberOfHistory" :key="index"
class="col-md-4 col-sm-4 col-lg-4 col-xs-4 col-xl-4 control-label">
@@ -204,8 +201,6 @@ const toUpdateUserSettings = () => {
overflow: auto;
}
-
-
.badges-text {
font-weight: 500;
font-size: 2.0em;
diff --git a/src/views/User/UserSettingsView.vue b/src/views/User/UserSettingsView.vue
index a190d10b34a07f9cb3eed1ce1ff62cc1c0f8a9a8..485d8dd73014ae413f73fdebc29dd676b6ce578e 100644
--- a/src/views/User/UserSettingsView.vue
+++ b/src/views/User/UserSettingsView.vue
@@ -1,9 +1,12 @@
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
+import {useRoute} from 'vue-router'
const router = useRouter();
+const url = useRoute().path;
+
const activeLink = ref('/settings/profile'); // Default active link
function setActive(link: string) {
@@ -42,7 +45,7 @@ function toBilling() {
<nav class="nav flex-column nav-pills nav-gap-y-1">
<a @click.prevent="setActive('/settings/profile')" @click="toProfile"
- :class="['nav-item nav-link has-icon', { 'nav-link-faded': activeLink !== '/settings/profile', 'active': activeLink === '/settings/profile' }]">
+ :class="['nav-item nav-link has-icon', { 'nav-link-faded': useRoute().path !== '/settings/profile', 'active': useRoute().path === '/settings/profile' }]">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-user mr-2">
@@ -54,7 +57,7 @@ function toBilling() {
<a @click.prevent="setActive('/settings/account')" @click="toAccount"
- :class="['nav-item nav-link has-icon', { 'nav-link-faded': activeLink !== '/settings/account', 'active': activeLink === '/settings/account' }]">
+ :class="['nav-item nav-link has-icon', { 'nav-link-faded': useRoute().path !== '/settings/account', 'active': useRoute().path === '/settings/account' }]">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-settings mr-2">
@@ -68,7 +71,7 @@ function toBilling() {
<a @click.prevent="setActive('/settings/security')" @click="toSecurity"
- :class="['nav-item nav-link has-icon', { 'nav-link-faded': activeLink !== '/settings/security', 'active': activeLink === '/settings/security' }]">
+ :class="['nav-item nav-link has-icon', { 'nav-link-faded': useRoute().path !== '/settings/security', 'active': useRoute().path === '/settings/security' }]">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-shield mr-2">
@@ -79,7 +82,7 @@ function toBilling() {
<a @click.prevent="setActive('/settings/notification')" @click="toNotification"
- :class="['nav-item nav-link has-icon', { 'nav-link-faded': activeLink !== '/settings/notification', 'active': activeLink === '/settings/notification' }]">
+ :class="['nav-item nav-link has-icon', { 'nav-link-faded': useRoute().path !== '/settings/notification', 'active': useRoute().path === '/settings/notification' }]">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-bell mr-2">
@@ -89,7 +92,7 @@ function toBilling() {
</a>
<a>
<a @click.prevent="setActive('/settings/bank')" @click="toBilling"
- :class="['nav-item nav-link has-icon', { 'nav-link-faded': activeLink !== '/settings/bank', 'active': activeLink === '/settings/bank' }]">
+ :class="['nav-item nav-link has-icon', { 'nav-link-faded': useRoute().path !== '/settings/bank', 'active': useRoute().path === '/settings/bank' }]">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-credit-card mr-2">