routing of sections works now

zero.Web/App/app.vue

@@ -9,10 +9,13 @@
   import Vue from 'vue'
   import Sass from '../Sass/app.scss'
   import AppNavigation from 'zero/navigation.vue'
+  import Router from '../router.js'
 
   export default {
     name: 'app',
 
+    router: Router,
+
     components: { AppNavigation },
 
     data: () => ({}),

zero.Web/App/navigation.vue

@@ -7,18 +7,20 @@
       <ui-button v-if="applications.length > 0" type="outline block" :label="applications[0].name" caret="down" />
     </div>
 
-    <nav>
+    <nav class="app-nav-inner">
       <template v-for="section in sections">
-        <a v-on:click.prevent="go(section)" href="#" class="app-nav-item" :class="{ 'is-active': section.alias === activeSection, 'has-children': hasChildren(section) }">
+        <router-link :to="getLink(section)" class="app-nav-item" :class="{ 'has-children': hasChildren(section) }">
           <i class="app-nav-item-icon" :class="section.icon" :style="{ color: section.color ? section.color : null }"></i>
           {{getName(section)}}
-          <i v-if="hasChildren(section)" class="fth-chevron-down"></i>
-        </a>
-        <div class="app-nav-children" v-if="hasChildren(section)">
-          <a v-for="child in section.children" v-on:click.prevent="go(child)" href="#" class="app-nav-child">
-            {{child.name}}
-          </a>
-        </div>
+          <i v-if="hasChildren(section)" class="app-nav-item-arrow fth-chevron-down"></i>
+        </router-link>
+        <transition name="app-nav-children">
+          <div class="app-nav-children" v-if="hasChildren(section) && $route.path.indexOf('/' + section.alias) > -1">
+            <router-link v-for="child in section.children" v-bind:key="child.alias" :to="getLink(section, child)" class="app-nav-child">
+              {{child.name}}
+            </router-link>
+          </div>
+        </transition>
       </template>
     </nav>
 
@@ -37,7 +39,6 @@
     components: { UiButton },
 
     data: () => ({
-      activeSection: null,
       applications: [],
       sections: []
     }),
@@ -47,7 +48,6 @@
       SectionsApi.getAll().then(items =>
       {
         this.sections = items;
-        this.activeSection = 'commerce';
       });
       ApplicationsApi.getAll().then(items =>
       {
@@ -67,9 +67,19 @@
         return section.alias.charAt(0).toUpperCase() + section.alias.slice(1);
       },
 
-      go(section)
+      getLink(section, child)
       {
-        this.activeSection = section.alias;
+        //if (section.alias === "dashboard" && !child)
+        //{
+        //  return '/';
+        //}
+
+        if (!child)
+        {
+          return '/' + section.alias;
+        }
+
+        return '/' + section.alias + '/' + child.alias;
       }
 
     }

zero.Web/Sass/Canvas/_canvas.scss

@@ -39,4 +39,14 @@ body
   display: grid;
   grid-template-columns: auto 1fr;
   justify-content: stretch;
+}
+
+.fade-enter-active, .fade-leave-active
+{
+  transition: opacity .5s;
+}
+
+.fade-enter, .fade-leave-to
+{
+  opacity: 0;
 }

zero.Web/Sass/Canvas/_navigation.scss

@@ -5,6 +5,10 @@
   background: var(--color-secondary);
   width: 260px;
   color: white;
+  height: 100%;
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: auto auto 1fr;
 
   a, button
   {
@@ -12,6 +16,11 @@
   }
 }
 
+.app-nav-inner
+{
+  overflow-y: auto;
+}
+
 .app-nav-headline
 {
   display: flex;
@@ -58,6 +67,16 @@ a.app-nav-item
   {
     font-weight: 700;
   }
+
+  .app-nav-item-arrow
+  {
+    transition: transform 0.2s ease;
+  }
+
+  &.is-active .app-nav-item-arrow
+  {
+    transform: rotate(180deg);
+  }
 }
 
 .app-nav-item-icon
@@ -88,4 +107,26 @@ a.app-nav-child
   {
     color: var(--color-fg-reverse);
   }
+
+  &.is-active
+  {
+    font-weight: 700;
+  }
+}
+
+
+.app-nav-children-enter-active
+{
+  transition: all .3s ease;
+}
+
+.app-nav-children-leave-active
+{
+  transition: all 0;
+}
+
+.app-nav-children-enter, .app-nav-children-leave-to
+{
+  transform: translateX(10px);
+  opacity: 0;
 }

zero.Web/router.js

@@ -1,17 +1,5 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import Flow from 'view/flow';
-import Transaction from 'view/transaction';
-import Invoices from 'view/invoices';
-import InvoiceEdit from 'view/invoiceedit';
-import Clients from 'view/clients';
-import Client from 'view/client';
-import Changelog from 'view/changelog';
-import Rules from 'view/rules';
-import Reports from 'view/reports';
-import Report from 'view/report';
-import ReportCreate from 'view/reportcreate';
-import EventHub from 'utils/eventhub.js';
 
 Vue.use(VueRouter);
 
@@ -19,62 +7,25 @@ history.scrollRestoration = 'manual';
 
 const routes = [
 
-  // flow
-  { path: '/', component: Flow, name: 'flow', meta: { title: 'Flow' } },
-  { path: '/provider/:provider', component: Flow, name: 'flowProvider', props: true, meta: { title: 'Flow' } },
-  { path: '/provider/:provider/page/:page', component: Flow, name: 'flowProviderAndPage', props: true, meta: { title: 'Flow' } },
-  { path: '/page/:page', component: Flow, name: 'flowPage', props: true, meta: { title: 'Flow' } },
-  { path: '/transaction/edit/:id', component: Transaction, name: 'transaction', props: true, meta: { title: 'Transaction' } },
-
-  // invoices
-  { path: '/invoices', component: Invoices, name: 'invoices', meta: { title: 'Invoices' } },
-  { path: '/invoices/create', component: InvoiceEdit, name: 'invoiceCreate', meta: { title: 'Create invoice' } },
-  { path: '/invoices/create/:id', component: InvoiceEdit, name: 'invoiceCreateFrom', props: true, meta: { title: 'Create invoice' } },
-  { path: '/invoices/edit/:id', component: InvoiceEdit, name: 'invoiceEdit', props: true, meta: { title: 'Edit invoice' } },
-  { path: '/invoices/:year', component: Invoices, name: 'invoicesYear', props: true, meta: { title: 'Invoices' } },
-
-  // clients
-  { path: '/clients', component: Clients, name: 'clients', meta: { title: 'Clients' } },
-  { path: '/clients/edit/:id', component: Client, name: 'client', props: true, meta: { title: 'Client' } },
-
-  // changelog
-  { path: '/changelog', component: Changelog, name: 'changelog', meta: { title: 'Changelog' } },
-
-  // rules
-  { path: '/rules', component: Rules, name: 'rules', props: true, meta: { title: 'Rules' } },
-  { path: '/rules/items', component: Rules, name: 'rulesItems', meta: { title: 'Rules' } },
-  { path: '/rules/history', component: Rules, name: 'rulesHistory', meta: { title: 'Rules' } },
-  { path: '/rules/edit/:id?', component: Rules, name: 'rules', props: true, meta: { title: 'Rules' } },
-
-  // reports
-  { path: '/reports', component: Reports, name: 'reports', meta: { title: 'Reports' } },
-  { path: '/reports/edit/:id', component: Report, name: 'report', props: true, meta: { title: 'Report' } },
-  { path: '/reports/create/:type?', component: ReportCreate, name: 'reportCreate', props: true, meta: { title: 'Report' } },
-  { path: '/reports/:year', component: Reports, name: 'reportsYear', props: true, meta: { title: 'Reports' } }
 ];
 
 const router = new VueRouter({
   mode: 'history',
   routes: routes,
+  base: zero.path,
+  linkActiveClass: 'is-active',
+  linkExactActiveClass: 'is-active-exact',
   scrollBehavior(to, from, savedPosition)
   {
     return savedPosition ? savedPosition : { x: 0, y: 0 };
-    //return new Promise((resolve, reject) =>
-    //{
-    //  EventHub.$once('page-loaded', () =>
-    //  {
-    //    console.info('pos', savedPosition);
-    //    resolve(savedPosition ? savedPosition : { x: 0, y: 0 });
-    //  });
-    //});
   }
 });
 
-router.beforeEach((to, from, next) =>
-{
-  document.title = to.meta.title !== null ? to.meta.title + " | fifty" : "fifty";
-  EventHub.$emit('dialog-close');
-  next();
-});
+//router.beforeEach((to, from, next) =>
+//{
+//  document.title = to.meta.title !== null ? to.meta.title + " | fifty" : "fifty";
+//  EventHub.$emit('dialog-close');
+//  next();
+//});
 
 export default router;

zero.Web/wwwroot/Assets/setup.js

@@ -63,7 +63,7 @@
 /******/
 /******/ 	var hotApplyOnUpdate = true;
 /******/ 	// eslint-disable-next-line no-unused-vars
-/******/ 	var hotCurrentHash = "725cc0bf974d3c533d23";
+/******/ 	var hotCurrentHash = "4756f8d46ba8a9947e6a";
 /******/ 	var hotRequestTimeout = 10000;
 /******/ 	var hotCurrentModuleData = {};
 /******/ 	var hotCurrentChildModule;