add navbar and routes

admin/src/App.vue

@@ -1,9 +1,16 @@
 <template>
-  <div id="app"></div>
+  <div id="app">
+    <nav-bar class="wrapper-nav" />
+    <router-view class="wrapper p-3"></router-view>
+  </div>
 </template>
 
 <script>
+import NavBar from '@/components/NavBar.vue'
 export default {
   name: 'App',
+  components: {
+    NavBar,
+  },
 }
 </script>

admin/src/components/NavBar.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <div>
+      <b-navbar toggleable="sm" type="dark" variant="info">
+        <b-navbar-brand to="/">Adminbereich</b-navbar-brand>
+
+        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+        <b-collapse id="nav-collapse" is-nav>
+          <b-navbar-nav>
+            <b-nav-item to="/user">User</b-nav-item>
+            <b-nav-item to="/creation">Schöpfen</b-nav-item>
+          </b-navbar-nav>
+        </b-collapse>
+        <b-navbar-brand href="http://localhost:3000/vue/login">Profilbereich</b-navbar-brand>
+      </b-navbar>
+    </div>
+  </div>
+</template>

admin/src/components/UserTable.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <b-table :items="items" :fields="fields" caption-top>
+      <template #table-caption>This is a table caption at the top.</template>
+    </b-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserTable',
+  props: {},
+  data() {
+    return {
+      fields: ['first_name', 'last_name', 'age'],
+      items: [
+        { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
+        { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
+        { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
+      ],
+    }
+  },
+}
+</script>

admin/src/main.js

@@ -14,6 +14,8 @@ import VueApollo from 'vue-apollo'
 import CONFIG from './config'
 
 import { BootstrapVue } from 'bootstrap-vue'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+import 'bootstrap/dist/css/bootstrap.css'
 
 const httpLink = new HttpLink({ uri: CONFIG.GRAPHQL_URI })
 

admin/src/router/routes.js

@@ -1,13 +1,36 @@
-import NotFound from '@/components/NotFoundPage.vue'
-
 const routes = [
   {
     path: '/',
+    component: () => import('@/views/Overview.vue'),
     meta: {
       requiresAuth: true,
     },
   },
-  { path: '*', component: NotFound },
+  {
+    path: '/overview',
+    component: () => import('@/views/Overview.vue'),
+    meta: {
+      requiresAuth: true,
+    },
+  },
+  {
+    path: '/user',
+    component: () => import('@/views/UserSearch.vue'),
+    meta: {
+      requiresAuth: true,
+    },
+  },
+  {
+    path: '/creation',
+    component: () => import('@/views/Creation.vue'),
+    meta: {
+      requiresAuth: true,
+    },
+  },
+  {
+    path: '*',
+    component: () => import('@/components/NotFoundPage.vue'),
+  },
 ]
 
 export default routes

admin/src/views/Creation.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    Schöpfen
+    <ul>
+      <li>Input Usersuche</li>
+      <li>Tabelle Creationen</li>
+    </ul>
+  </div>
+</template>

admin/src/views/Overview.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <user-table count="5" />
+
+    Startübersicht Adminbereich
+    <ul>
+      <li>Unbestätigte E-mail Registrierung</li>
+      <li>offene Schöpfungen</li>
+      <li>letzte 10 Schöpfungen</li>
+    </ul>
+  </div>
+</template>
+<script>
+import UserTable from '../components/UserTable.vue'
+export default {
+  name: 'overview',
+  components: {
+    UserTable,
+  },
+}
+</script>

admin/src/views/UserSearch.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    Usersuche
+    <ul>
+      <li>Input Usersuche</li>
+      <li>Tabelle Ergenisse</li>
+    </ul>
+  </div>
+</template>