diff --git a/package-lock.json b/package-lock.json
index d8241d9162867c7534eb80fe1a6482c42f63a13c..380793cab4d9aec8226d36377a5a0f5f9ef907f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "frontend",
"version": "0.0.0",
"dependencies": {
+ "@popperjs/core": "^2.11.8",
"axios": "^1.6.8",
"bootstrap": "^5.3.3",
"js-cookie": "^3.0.5",
@@ -1366,7 +1367,6 @@
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
- "peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
diff --git a/package.json b/package.json
index ddb8161ec3e1e08315d7c798156312bcdeda16d3..abf7692db221f6ba8f6bcb90e1978cafe97b4ee2 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"format": "prettier --write src/"
},
"dependencies": {
+ "@popperjs/core": "^2.11.8",
"axios": "^1.6.8",
"bootstrap": "^5.3.3",
"js-cookie": "^3.0.5",
diff --git a/src/assets/Sparesti-logo.png b/src/assets/Sparesti-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..22c480c6044969c4c3352cd33f20a3a0334441b9
Binary files /dev/null and b/src/assets/Sparesti-logo.png differ
diff --git a/src/assets/userprofile.png b/src/assets/userprofile.png
new file mode 100644
index 0000000000000000000000000000000000000000..399fa14557c357f826b72a69306f54b3c5ac002b
Binary files /dev/null and b/src/assets/userprofile.png differ
diff --git a/src/components/BaseComponents/Menu.vue b/src/components/BaseComponents/Menu.vue
index ff63410a1aae31e94e1836490f47083dbaa2d6b2..1b5a85fab29f79d7defebcf13d54a8cd5a509eb5 100644
--- a/src/components/BaseComponents/Menu.vue
+++ b/src/components/BaseComponents/Menu.vue
@@ -1,43 +1,106 @@
<template>
- <nav class="navbar navbar-expand-lg bg-danger-subtle">
- <div class="container-fluid">
- <a class="navbar-brand" href="#">Navbar</a>
+ <nav class="navbar navbar-expand-lg bg-success">
+ <div class="container-fluid" >
+ <a class="navbar-brand" href="/" @click="toHome">
+ <img src="/src/assets/Sparesti-logo.png" alt="Sparesti-logo" width="60">
+ </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
- <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+ <ul class="navbar-nav ms-auto mb-2 mb-lg-0 ui-menu">
<li class="nav-item">
- <a class="nav-link active" aria-current="page" href="#">Home</a>
+ <a class="nav-link text-white" href="/news" @click="toSavingGoals">Saving goals</a>
</li>
<li class="nav-item">
- <a class="nav-link" href="#">Link</a>
- </li>
- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
- aria-expanded="false">
- Dropdown
- </a>
- <ul class="dropdown-menu">
- <li><a class="dropdown-item" href="#">Action</a></li>
- <li><a class="dropdown-item" href="#">Another action</a></li>
- <li>
- <hr class="dropdown-divider">
- </li>
- <li><a class="dropdown-item" href="#">Something else here</a></li>
- </ul>
- </li>
- <li class="nav-item">
- <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+ <a class="nav-link text-white" href="/news" @click="toLeaderboard">Leaderboard</a>
</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>
- <form class="d-flex" role="search">
- <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
- <button class="btn btn-outline-success" type="submit">Search</button>
- </form>
+ </div>
+ </nav>
</div>
</div>
</nav>
-</template>
\ No newline at end of file
+</template>
+<script setup lang="ts">
+
+
+/**
+ * May need to change from a-links to routerlinks to avoid complications with href.
+ */
+
+import {useRouter} from "vue-router";
+
+const router = useRouter();
+
+function toHome(){
+ router.push('/')
+}
+
+function toSavingGoals(){
+ router.push('/news')
+}
+
+function toLeaderboard(){
+ router.push('/news')
+}
+
+function toNews(){
+ router.push('/news')
+}
+
+function toStore(){
+ router.push('/news')
+}
+
+function toSetting(){
+ router.push('/news')
+}
+
+function toFeedback(){
+ router.push('/news')
+}
+
+function toUserProfile(){
+ router.push('/news')
+}
+
+
+</script>
+<style scoped>
+.ui-menu{
+ font-size: 150%;
+}
+
+.username-text{
+ font-size: 150%;
+
+}
+
+.dropdown-username-content{
+ font-size: 150%;
+}
+
+.dropdown-username-link:hover{
+ background-color: #538d53
+}
+</style>
\ No newline at end of file