dynamic profile nav

conf/init.json

@@ -1,47 +1,81 @@
 {
+    "ui": {
         "title": "MyApp",
         "api": {
             "baseURL": "https://cx20.basehosts.de/api/v1/"
         },
-    "navigation": [
+        "navigation": {
+            "main": [
+                {
+                    "name": "Dashboard",
+                    "to": "/",
+                    "icon": "icon-compass"
+                },
+                {
+                    "name": "Userlist",
+                    "to": "/userlist",
+                    "icon": "icon-contacts"
+                },
+                {
+                    "name": "Domainlist",
+                    "to": "/domainlist",
+                    "icon": "icon-contacts"
+                },
+                {
+                    "name": "FormDemo",
+                    "to": "/formdemo",
+                    "icon": "icon-contacts"
+                }
+            ],
+            "profile": [
+                {
+                    "name": "Profile anpassen",
+                    "to": "/profile",
+                    "icon": "icon-color-wand"
+                },
+                {
+                    "name": "Logout",
+                    "to": "/logout",
+                    "icon": "icon-log-out"
+                }
+            ]
+        }
+    },
+    "routes": [
         {
             "name": "Login",
             "to": "/login",
-            "icon": "fa-home",
+            "content": "<login-form></login-form>"
-            "content": "<login-form></login-form>",
-            "show": {
-                "never": true
-            }
         },
         {
             "name": "Dashboard",
             "to": "/",
-            "icon": "icon-compass",
             "content": "<dashboard></dashboard>"
         },
         {
             "name": "Userlist",
             "to": "/userlist",
-            "icon": "icon-contacts",
             "content": "<userlist></userlist>"
         },
         {
             "name": "Domainlist",
             "to": "/domainlist",
-            "icon": "icon-contacts",
             "content": "<domainlist></domainlist>"
         },
         {
             "name": "FormDemo",
             "to": "/formdemo",
-            "icon": "icon-contacts",
             "content": "<form-demo></form-demo>"
         },
         {
             "name": "Logout",
             "to": "/logout",
-            "icon": "icon-log-out",
             "content": "<logout></logout>"
+        },
+        {
+            "name": "Profil",
+            "to": "/profile",
+            "content": "<h3>Profil anpassen</h3>"
         }
     ]
 }

src/app.vue

@@ -1,7 +1,7 @@
 <template>
 
     <div class="app">
-        <topbar></topbar>
+        <topbar :items="profileItems"></topbar>
         <sidebar :items="navigationItems"></sidebar>
 
         <div class="content_area">
@@ -30,7 +30,8 @@ export default {
     },
     data() {
         return {
-            navigationItems: this.$store.state.navigation
+            navigationItems: this.$store.state.ui.navigation.main,
+            profileItems: this.$store.state.ui.navigation.profile
         }
     },
     created() {

src/components/navigation.vue

@@ -1,23 +0,0 @@
-<template>
-    <div class="Navigation">
-        <ul>
-            <li v-for="(e, i) in items" :key="i">
-                <router-link :to="e.to">{{ e.name }}</router-link>
-            </li>
-        </ul>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "Navigation",
-    props: {
-        items: {
-            type: Array,
-            default() {
-                return [ ];
-            }
-        }
-    }
-}
-</script>

src/components/sidebar.vue

@@ -163,7 +163,6 @@ export default {
     },
     methods: {
         showIf(conf) {
-            console.log(conf);
             // show if not configured
             if (!conf) {
                 return true;

src/components/topbar.vue

@@ -12,18 +12,12 @@
             </a>
             <nav class="user_menu">
                 <ul>
-                    <li><a href="#">
+                    <router-link tag="li" v-for="(item, i) in items" :key="i" v-if="showIf(item.show)" :to="item.to" active-class="active" exact>
-                        <i class="icon icon-color-wand" aria-hidden="true"></i>
+                        <a>
-                        <div class="title">
+                            <i :class="['icon', item.icon]"></i>
-                            <router-link :to="'/users/' + loginID">Profil anpassen</router-link>
+                            <div class="title">{{ item.name }}</div>
-                        </div>
+                        </a>
-                    </a></li>
+                    </router-link>
-                    <li><a href="#">
-                        <i class="icon icon-log-out" aria-hidden="true"></i>
-                        <div class="title">
-                            <router-link to="/logout">Logout</router-link>
-                        </div>
-                    </a></li>
                 </ul>
             </nav>
         </div>
@@ -33,6 +27,9 @@
 <script>
 export default {
     name: "Topbar",
+    props: [
+        "items"
+    ],
     data() {
         return {
         }
@@ -67,6 +64,15 @@ export default {
     methods: {
         toggleMenu() {
             this.$refs.user_profile.classList.toggle("open");
+        },
+        showIf(conf) {
+            // show if not configured
+            if (!conf) {
+                return true;
+            }
+            if (conf.never) {
+                return false;
+            }
         }
     }
 }

src/main.js

@@ -14,8 +14,7 @@ const router = new VueRouter();
 
 const store = new Vuex.Store({
     state: {
-        api: {},
+        ui: {},
-        navigation: [],
         persist: {
             login: {},
             authToken: '',
@@ -24,13 +23,8 @@ const store = new Vuex.Store({
         }
     },
     mutations: {
-        setAPI(state, payload) {
+        setUI(state, payload) {
-            state.api = payload;
+            state.ui = payload;
-        },
-        setNavigation(state, payload) {
-            for (var i = 0; i < payload.length; i++) {
-                state.navigation.push(payload[i]); // = payload;
-            }
         },
         setCredentials(state, payload) {
             state.persist.credentials = {
@@ -59,7 +53,7 @@ const store = new Vuex.Store({
                 return new Promise((resolve, reject) => {
                     Axios({
                         method: payload.method ? payload.method : 'get',
-                        baseURL: context.state.api.baseURL,
+                        baseURL: context.state.ui.api.baseURL,
                         url: payload.endpoint,
                         params: payload.params,
                         data: payload.data,
@@ -173,21 +167,18 @@ if (persist) {
 Axios.get('conf/init.json')
     .then(results => {
         // set navigation
-        if (!Array.isArray(results.data.navigation)) {
+        if (!Array.isArray(results.data.routes)) {
-            alert('invalid data in init.json');
+            alert('invalid data in init.json, no routes');
             return;
         }
-        const navigation = results.data.navigation.map(({name, to, icon, show}) => {return {name, to, icon, show}});
 
-        store.commit("setNavigation", navigation);
+        // set ui config in store
-
+        store.commit("setUI", results.data.ui);
-        // set api config in store
-        store.commit("setAPI", results.data.api);
 
         // add routes
         let routes = [];
         let rIdx = 0;
-        results.data.navigation.forEach(({name, to, content, data}) => routes.push({
+        results.data.routes.forEach(({name, to, content, data}) => routes.push({
             name: name,
             path: to,
             meta: {
@@ -206,7 +197,6 @@ Axios.get('conf/init.json')
         }));
         router.addRoutes(routes);
         router.beforeEach((to, from, next) => {
-            console.log(to);
             document.title = (to.meta && to.meta.title) ? results.data.title + ': ' + to.meta.title : results.data.title;
             next();
         });