first output draft of app navigation with sections

zero.Web/App/Resources/sections.js

@@ -0,0 +1,10 @@
+import Axios from 'axios';
+
+export default {
+
+  // get all texts
+  getAll()
+  {
+    return Axios.get(zero.path + 'api/sections/getAll').then(res => Promise.resolve(res.data));
+  }
+};

zero.Web/App/app.vue

@@ -1,33 +1,21 @@
 <template>
   <div class="app">
-    count: {{count}} <br>
-    <button @click="add()">add</button>
+    <app-navigation />
   </div>
 </template>
 
 
 <script>
   import Vue from 'vue'
+  import Sass from '../Sass/app.scss'
+  import AppNavigation from 'zero/navigation.vue'
 
   export default {
     name: 'app',
 
-    data: () => ({
-      count: 0
-    }),
+    components: { AppNavigation },
 
-    mounted ()
-    {
-      
-    },
-
-    methods: {
-
-      add()
-      {
-        this.count += 1;
-      }
-    }
+    data: () => ({}),
   }
 
 </script>

zero.Web/App/navigation.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="app-nav">
+
+    <h1 class="app-nav-headline">zero</h1>
+
+    <div class="app-nav-switch">
+      <ui-button type="outline block" label="brothers" caret="down" />
+    </div>
+
+    <nav v-for="section in sections">
+      <a href="#" class="app-nav-item">
+        <i class="app-nav-item-icon" :class="section.icon" :style="{ color: section.color ? section.color : 'var(--color-fg-reverse-mid)' }"></i>
+        {{getName(section)}}
+      </a>
+    </nav>
+
+  </div>
+</template>
+
+
+<script>
+  import SectionsApi from 'zeroresources/sections.js'
+  import UiButton from 'zerocomponents/buttons/button.vue'
+
+  export default {
+    name: 'app-navigation',
+
+    components: { UiButton },
+
+    data: () => ({
+      sections: []
+    }),
+
+    mounted ()
+    {
+      SectionsApi.getAll().then(items =>
+      {
+        this.sections = items;
+      });
+    },
+
+    methods: {
+
+      getName(section)
+      {
+        return section.alias.charAt(0).toUpperCase() + section.alias.slice(1);
+      }
+
+    }
+  }
+
+</script>

zero.Web/Controllers/IndexController.cs

@@ -9,9 +9,11 @@ namespace zero.Web.Controllers
   [AllowAnonymous]
   public class IndexController : BackofficeController
   {
+    private ZeroOptions Options { get; set; }
+
     public IndexController(IZeroConfiguration config, IOptionsMonitor<ZeroOptions> options) : base(config)
     {
-
+      Options = options.CurrentValue;
     }
 
 
@@ -22,7 +24,7 @@ namespace zero.Web.Controllers
         return RedirectToAction("Index", "Setup");
       }
 
-      return View("/Views/Index.cshtml");
+      return View("/Views/Index.cshtml", Options);
     }
   }
 }

zero.Web/Controllers/SectionsController.cs

@@ -7,11 +7,11 @@ using zero.Core;
 namespace zero.Web.Controllers
 {
   [AllowAnonymous]
-  public class SectionController : BackofficeController
+  public class SectionsController : BackofficeController
   {
     private ZeroOptions Options { get; set; }
 
-    public SectionController(IZeroConfiguration config, IOptionsMonitor<ZeroOptions> options) : base(config)
+    public SectionsController(IZeroConfiguration config, IOptionsMonitor<ZeroOptions> options) : base(config)
     {
       Options = options.CurrentValue;
     }

zero.Web/Controllers/SetupController.cs

@@ -2,6 +2,7 @@
 using Microsoft.AspNetCore.Hosting;
 using Microsoft.AspNetCore.Identity;
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.Options;
 using System;
 using System.Linq;
 using System.Threading.Tasks;
@@ -21,18 +22,21 @@ namespace zero.Web.Setup
 
     protected IWebHostEnvironment Environment { get; private set; }
 
+    protected ZeroOptions Options { get; private set; }
 
-    public SetupController(IZeroConfiguration config, ISetupApi api, IWebHostEnvironment env) : base(config) //  UserManager<User> userManager
+
+    public SetupController(IZeroConfiguration config, ISetupApi api, IWebHostEnvironment env, IOptionsMonitor<ZeroOptions> options) : base(config) //  UserManager<User> userManager
     {
       Api = api;
       Environment = env;
+      Options = options.CurrentValue;
     }
 
     public IActionResult Index()
     {
       if (!Configuration.ZeroVersion.IsNullOrEmpty())
       {
-        return RedirectToAction("Index", "Index");
+        return Redirect(Options.BackofficePath);
       }
 
       return View("/Views/Setup.cshtml");

zero.Web/Sass/Canvas/_all.scss

@@ -0,0 +1,4 @@
+
+@import "canvas";
+
+@import "navigation";

zero.Web/Sass/Canvas/_canvas.scss

@@ -0,0 +1,42 @@
+
+
+body, html
+{
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html
+{
+  height: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body
+{
+  height: 100%;
+  background: var(--color-bg);
+  color: var(--color-fg);
+  font-size: 16px;
+  @extend %font;
+}
+
+.clear
+{
+  display: block;
+  clear: both;
+  float: none;
+}
+
+.app
+{
+  height: 100%;
+  min-height: 100%;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  justify-content: stretch;
+}

zero.Web/Sass/Canvas/_navigation.scss

@@ -0,0 +1,58 @@
+
+
+.app-nav
+{
+  background: var(--color-secondary);
+  width: 250px;
+  color: white;
+
+  a, button
+  {
+    outline: none !important;
+  }
+}
+
+.app-nav-headline
+{
+  display: flex;
+  align-items: center;
+  padding: 0 var(--padding);
+  font-size: 2.2em;
+  line-height: 1;
+  font-weight: 700;
+  height: var(--height-top);
+  margin: 0;
+}
+
+.app-nav-switch
+{
+  padding: 20px var(--padding) 30px;
+
+  .ui-button.type-outline
+  {
+    background: var(--color-secondary);
+    color: var(--color-fg-reverse-mid);
+    border-color: rgba(white, 0.1);
+    padding-left: 20px;
+  }
+}
+
+.app-nav-item
+{
+  display: grid;
+  grid-template-columns: 30px 1fr auto;
+  grid-gap: 6px;
+  align-items: center;
+  font-size: $font-size;
+  padding: 0 var(--padding);
+  height: 56px;
+}
+
+.app-nav-item-icon
+{
+  font-size: 18px;
+  line-height: 1;
+  font-weight: 400;
+  position: relative;
+  top: -1px;
+}

zero.Web/Sass/Core/_settings.scss

@@ -3,7 +3,7 @@
 {
   // accent colors
   --color-primary: #45acd7;
-  --color-secondary: #2f3a43;
+  --color-secondary: #1f272e;
   --color-negative: #d82853; 
 
   // foreground/text color
@@ -11,6 +11,9 @@
   --color-fg-mid: #6f7375;
   --color-fg-light: #919294;
 
+  --color-fg-reverse: #fff;
+  --color-fg-reverse-mid: #c1c5c9;
+
   // background color shades
   --color-bg: #fff;
   --color-bg-light: #f8f9fa;
@@ -19,6 +22,12 @@
   // line colors
   --color-line: #eaebec;
   --color-line-mid: #d7d8d9;
+
+
+  // sizes
+
+  --padding: 32px;
+  --height-top: 74px;
 }
 
 

zero.Web/Sass/Modules/Buttons/_button.scss

@@ -67,6 +67,12 @@ button
     padding: 0 30px;
   }
 
+  &.type-block
+  {
+    display: flex;
+    width: 100%;
+  }
+
   & + .ui-button
   {
     margin-left: 10px;

zero.Web/Startup.cs

@@ -134,6 +134,17 @@ namespace zero.Web
 
       app.UseEndpoints(endpoints =>
       {
+        // setup route
+        endpoints.MapControllerRoute(
+          name: "setup",
+          pattern: zeroPath + "setup",
+          defaults: new
+          {
+            controller = "Setup",
+            action = "Index"
+          }
+        );
+
         // routes for API
         endpoints.MapControllerRoute(
           name: "api",

zero.Web/Views/Index.cshtml

@@ -1,4 +1,6 @@
-@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@using zero.Core.Extensions
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@model zero.Core.ZeroOptions
 @{
   Layout = null;
 }
@@ -19,6 +21,10 @@
 </head>
 <body>
   <div id="app"></div>
+  <script>
+    window.zero = window.zero || {};
+    zero.path = "@Model.BackofficePath.EnsureEndsWith('/')";
+  </script>
   <script src="~/Assets/app.js" asp-append-version="true"></script>
 </body>
 </html>

zero.Web/config.js

@@ -1,6 +0,0 @@
-export default {
-
-  isDebug: process.env.NODE_ENV !== 'production',
-
-  apiBase: '/api'
-};

zero.Web/webpack.config.js

@@ -29,6 +29,7 @@ module.exports = {
       'zero': path.join(__dirname, 'App'),
       'zerosetup': path.join(__dirname, 'Setup'),
       'zerocomponents': path.join(__dirname, 'App', 'Components'),
+      'zeroresources': path.join(__dirname, 'App', 'Resources'),
       '@': __dirname
     }
   },