From 82a9a0b9d8d9afc2893f0bd252a3c40674f140e8 Mon Sep 17 00:00:00 2001
From: ingrid <ingrimeg@stud.ntnu.no>
Date: Wed, 19 Apr 2023 14:37:26 +0200
Subject: [PATCH] Opprettet navbar med placeholder ikoner
---
src/App.vue | 15 +-----
src/components/Navbar.vue | 62 +++++++++++++++++++++++
src/components/icons/code-svgrepo-com.svg | 24 +++++++++
3 files changed, 88 insertions(+), 13 deletions(-)
create mode 100644 src/components/Navbar.vue
create mode 100644 src/components/icons/code-svgrepo-com.svg
diff --git a/src/App.vue b/src/App.vue
index e864195..8b39d47 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,11 @@
<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>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
new file mode 100644
index 0000000..678c2bb
--- /dev/null
+++ b/src/components/Navbar.vue
@@ -0,0 +1,62 @@
+<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
diff --git a/src/components/icons/code-svgrepo-com.svg b/src/components/icons/code-svgrepo-com.svg
new file mode 100644
index 0000000..a5c3287
--- /dev/null
+++ b/src/components/icons/code-svgrepo-com.svg
@@ -0,0 +1,24 @@
+<?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
--
GitLab