Opprettet navbar med placeholder ikoner

src/App.vue

 <script setup>
 import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from './components/HelloWorld.vue'
+import Navbar from "@/components/Navbar.vue";
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
-    </div>
-  </header>
-
+    <Navbar></Navbar>
   <RouterView />
 </template>
 

src/components/Navbar.vue

+<template>
+    <div>
+        <nav>
+            <ul>
+                <li>
+                    <RouterLink :to="'/Home'">
+                        <img src="src/components/icons/code-svgrepo-com.svg" alt="Home-button">
+                    </RouterLink>
+                </li>
+                <li>
+                    <RouterLink :to="'/Fridge'">
+                        <img src="src/components/icons/code-svgrepo-com.svg" alt="Fridge-button">
+                    </RouterLink>
+                 </li>
+                <li>
+                    <RouterLink :to="'/Weekplan'">
+                        <img src="src/components/icons/code-svgrepo-com.svg" alt="logo-button">
+                    </RouterLink>
+                </li>
+                <li>
+                    <RouterLink :to="'/ShoppingList'">
+                        <img src="src/components/icons/code-svgrepo-com.svg" alt="shopping-list-button">
+                    </RouterLink>
+                </li>
+                <li>
+                    <RouterLink :to="'/UserSettings'">
+                        <img src="src/components/icons/code-svgrepo-com.svg" alt="settings-button">
+                    </RouterLink>
+                </li>
+            </ul>
+        </nav>
+    </div>
+</template>
+<script>
+export default {
+    name: "Navbar"
+}
+</script>
+
+<style scoped>
+nav {
+    width: 393px;
+    background-color: #00663C;
+}
+img{
+    width:20%;
+}
+ul {
+    display: flex;
+    list-style-type: none;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+}
+li{
+    text-align: center;
+    padding-top: 0.4em;
+}
+a {
+    text-decoration: none;
+}
+</style>
\ No newline at end of file

src/components/icons/code-svgrepo-com.svg

+<?xml version="1.0" ?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+
+<title/>
+
+<g id="Complete">
+
+<g id="Code">
+
+<g>
+
+<polyline data-name="Right" fill="none" id="Right-2" points="15.5 7 20.5 12 15.5 17" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+
+<polyline data-name="Left" fill="none" id="Left-2" points="8.5 7 3.5 12 8.5 17" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+
+</g>
+
+</g>
+
+</g>
+
+</svg>
\ No newline at end of file