diff --git a/index.html b/index.html
index 86772fbfd860ca06b42929d41b3267304113a302..09d3ae35ee498db5c414f7a9a8c789167cc1bb50 100644
--- a/index.html
+++ b/index.html
@@ -19,15 +19,15 @@
</head>
<body class="bg-light">
-<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
+<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" id="vipsobsappmenu">
- <a class="navbar-brand mr-auto mr-lg-0" href="#">
-<img src="static/css/images/logo_vips_hvit.png" style="height: 27px; position: relative; top: -3px; margin-right: 15px"/>Feltobservasjoner</a>
+ <router-link class="navbar-brand mr-auto mr-lg-0" to="/">
+<img src="static/css/images/logo_vips_hvit.png" style="height: 27px; position: relative; top: -3px; margin-right: 15px"/>Feltobservasjoner</router-link>
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="navbar-collapse offcanvas-collapse" id="vipsobsappmenu">
+ <div class="navbar-collapse offcanvas-collapse" >
<form class="my-2 my-lg-0">
<div class="form-group">
<input class="form-control mr-sm-2" type="text" placeholder="Brukernavn" aria-label="Brukernavn">
@@ -40,21 +40,21 @@
<hr/>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
- <a class="nav-link" href="#">Mine observasjoner</a>
+ <router-link class="nav-link" to="/" onclick="$('.offcanvas-collapse').toggleClass('open')">Mine observasjoner (startsiden)</router-link>
</li>
<li class="nav-item">
- <a class="nav-link" href="#">Mine steder</a>
+ <router-link class="nav-link" to="/places" onclick="$('.offcanvas-collapse').toggleClass('open')">Mine steder</router-link>
</li>
<li class="nav-item">
- <a class="nav-link" href="#">Innstillinger</a>
+ <router-link class="nav-link" onclick="$('.offcanvas-collapse').toggleClass('open')" to="/settings">Innstillinger</router-link>
</li>
</ul>
</div>
</nav>
-<main role="main" class="container">
- <div id="app"></div>
+<main id="app" role="main" class="container">
+
</main>
<script src="static/js/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="static/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="static/js/bootstrap.bundle.min.js"></script>
diff --git a/src/App.vue b/src/App.vue
index d74c648e1586c443cc1f9afd4235260074da0109..383ea108c0cd07141b6633b57eaf04f425c1bdf5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,7 @@
<template>
- <div id="app">
- <img src="./assets/logo.png">
+ <main id="app" role="main" class="container">
<router-view/>
- </div>
+ </main>
</template>
<script>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 1c19f2a399d4735f5a3dd4ae1456f476f3de2fa4..0000000000000000000000000000000000000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
- <div class="hello">
- <h1>{{ msg }}</h1>
- <h2>Essential Links</h2>
- <ul>
- <li>
- <a
- href="https://vuejs.org"
- target="_blank"
- >
- Core Docs
- </a>
- </li>
- <li>
- <a
- href="https://forum.vuejs.org"
- target="_blank"
- >
- Forum
- </a>
- </li>
- <li>
- <a
- href="https://chat.vuejs.org"
- target="_blank"
- >
- Community Chat
- </a>
- </li>
- <li>
- <a
- href="https://twitter.com/vuejs"
- target="_blank"
- >
- Twitter
- </a>
- </li>
- <br>
- <li>
- <a
- href="http://vuejs-templates.github.io/webpack/"
- target="_blank"
- >
- Docs for This Template
- </a>
- </li>
- </ul>
- <h2>Ecosystem</h2>
- <ul>
- <li>
- <a
- href="http://router.vuejs.org/"
- target="_blank"
- >
- vue-router
- </a>
- </li>
- <li>
- <a
- href="http://vuex.vuejs.org/"
- target="_blank"
- >
- vuex
- </a>
- </li>
- <li>
- <a
- href="http://vue-loader.vuejs.org/"
- target="_blank"
- >
- vue-loader
- </a>
- </li>
- <li>
- <a
- href="https://github.com/vuejs/awesome-vue"
- target="_blank"
- >
- awesome-vue
- </a>
- </li>
- </ul>
- </div>
-</template>
-
-<script>
-export default {
- name: 'HelloWorld',
- data () {
- return {
- msg: 'Welcome to Your Vue.js App'
- }
- }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
- font-weight: normal;
-}
-ul {
- list-style-type: none;
- padding: 0;
-}
-li {
- display: inline-block;
- margin: 0 10px;
-}
-a {
- color: #42b983;
-}
-</style>
diff --git a/src/components/ObservationList.vue b/src/components/ObservationList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..24e514b8bdb2a26285b6741ae5e82dd36c8790f0
--- /dev/null
+++ b/src/components/ObservationList.vue
@@ -0,0 +1,34 @@
+<template>
+ <div class="hello">
+ <h1>{{ msg }}</h1>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'ObservationList',
+ data () {
+ return {
+ msg: 'Startsiden'
+ }
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+ font-weight: normal;
+}
+ul {
+ list-style-type: none;
+ padding: 0;
+}
+li {
+ display: inline-block;
+ margin: 0 10px;
+}
+a {
+ color: #42b983;
+}
+</style>
diff --git a/src/components/PlacesList.vue b/src/components/PlacesList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0ddb52e0f9feee6990a4f667c0280acc14843777
--- /dev/null
+++ b/src/components/PlacesList.vue
@@ -0,0 +1,16 @@
+<template>
+ <div class="hello">
+ <h1>{{ msg }}</h1>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'PlacesList',
+ data () {
+ return {
+ msg: 'Mine steder'
+ }
+ }
+}
+</script>
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9824cc602fec76eb2aeadc72725230a40ac02b97
--- /dev/null
+++ b/src/components/Settings.vue
@@ -0,0 +1,16 @@
+<template>
+ <div class="hello">
+ <h1>{{ msg }}</h1>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'Settings',
+ data () {
+ return {
+ msg: 'Innstillinger'
+ }
+ }
+}
+</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 417390e2862c8510f8b42dd01014e88d4136a449..c9fc9baf08e078fbc7c755d2d5c1be1b79de8825 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,4 +12,13 @@ new Vue({
router,
components: { App },
template: '<App/>'
-})
+});
+
+/**
+ * Hope this works. It's for adding router functionality to the menu,
+ * which is outside the main app
+ */
+new Vue({
+ el: '#vipsobsappmenu',
+ router
+});
diff --git a/src/router/index.js b/src/router/index.js
index 5fa7f9d3191e33ac45048462ca4ad9a582a76e73..5d2ade0823b5c3a174f9a718532d213f2cd97201 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,8 @@
import Vue from 'vue'
import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import ObservationList from '@/components/ObservationList'
+import PlacesList from '@/components/PlacesList'
+import Settings from '@/components/Settings'
Vue.use(Router)
@@ -8,8 +10,18 @@ export default new Router({
routes: [
{
path: '/',
- name: 'HelloWorld',
- component: HelloWorld
+ name: 'ObservationList',
+ component: ObservationList
+ },
+ {
+ path: '/places',
+ name: 'PlacesList',
+ component: PlacesList
+ },
+ {
+ path: '/settings',
+ name: 'Settings',
+ component: Settings
}
]
})