start new app selector

zero.Web.UI/App/navigation.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="app-nav theme-light" :class="{'is-compact': compact }">
 
+    <div class="app-nav-apps theme-dark">
+      <ui-header-bar class="ui-tree-header" title="Applications" :back-button="false" />
+      <button v-for="app in applications" :key="app.id" type="button" @click="applicationChanged(app)" class="app-nav-app" :class="{ 'is-active': app.id == appId }">
+        <img :src="app.image" class="app-nav-app-icon" :alt="app.name" />
+        <ui-localize :value="app.name" />
+        <ui-icon v-if="app.id == appId" symbol="fth-check" class="app-nav-app-selected" />
+      </button>
+    </div>
+
     <div class="app-nav-boxed">
 
       <h1 class="app-nav-headline">
@@ -13,7 +22,7 @@
 
     <ui-dropdown v-if="applications.length > 0" theme="dark" class="app-nav-switch theme-dark">
       <template v-slot:button>
-        <ui-button type="light block" :label="currentApplication.name" caret="down" />
+        <ui-button type="light block" :label="currentApplication.name" caret="right" />
       </template>
       <button v-for="app in applications" :key="app.id" type="button" @click="applicationChanged(app)" class="ui-dropdown-button has-icon" :class="{ 'is-active': app.id == appId }">
         <img :src="app.image" class="ui-dropdown-button-icon" :alt="app.name" />

zero.Web.UI/Sass/Canvas/_navigation.scss

@@ -1,7 +1,56 @@
 
 
+.app-nav-apps
+{
+  position: absolute;
+  left: 100%;
+  top: 0;
+  bottom: 0;
+  width: 360px;
+  background: var(--color-bg-shade-2);
+  z-index: -1;
+  margin-left: 0;
+  display: flex;
+  flex-direction: column;
+  
+  display: none; // TODO
+
+  .ui-header-bar
+  {
+    height: 92px;
+  }
+}
+
+.app-nav-app
+{
+  display: grid;
+  grid-template-columns: auto minmax(auto, 1fr) auto;
+  grid-gap: var(--padding-s);
+  align-items: center;
+  margin: 0 var(--padding-m);
+  padding: var(--padding-s) var(--padding-s);
+  border-radius: var(--radius);
+
+  &.is-active
+  {
+    background: var(--color-bg-shade-3);
+    font-weight: 700;
+  }
+}
+
+.app-nav-app-icon
+{
+  height: 32px;
+}
+
+.app-nav-app-selected
+{
+
+}
+
 .app-nav
 {
+  position: relative;
   background: var(--color-box);
   width: 260px;
   color: var(--color-text);
@@ -10,6 +59,7 @@
   grid-template-rows: auto auto 1fr auto;  
   box-shadow: var(--shadow-short);
   margin-right: 1px;
+  z-index: 5;
 
   .theme-rounded &
   {