ui rework

ui/index.html

@@ -44,6 +44,8 @@
     <div class="message">{{ error.message }}</div>
 </div>
 
+<div class="toasts"><div v-for="t in toasts" :class="'toast '+t.kind" @click="dismissToast(t.id)">{{ t.message }}</div></div>
+
 <template v-if="!publicState">
     <p>Not connected.</p>
 </template>
@@ -83,10 +85,18 @@
 </template>
 
 <template v-else>
-  <div style="float:right;"><input type="search" placeholder="Filter" v-model="viewFilter"/></div>
-  <p class="view-links"><span v-for="v in views" @click="view = v" :class="{selected: view.type==v.type && view.name==v.name}">{{v.title}}</span></p>
-
-  <h2 v-if="view">{{view.title}}</h2>
+  <div class="layout">
+  <nav class="sidebar">
+    <input type="search" placeholder="Filter" v-model="viewFilter"/>
+    <p class="nav-section">Admin</p>
+    <p class="view-links"><span v-for="v in adminViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</span></p>
+    <p class="nav-section" v-if="clusterViews.length">Clusters</p>
+    <p class="view-links" v-if="clusterViews.length"><span v-for="v in clusterViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</span></p>
+    <p class="nav-section" v-if="hostViews.length">Hosts</p>
+    <p class="view-links" v-if="hostViews.length"><span v-for="v in hostViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</span></p>
+  </nav>
+  <main class="content">
+  <h2 v-if="view">{{ view.type == 'cluster' ? 'Cluster ' : view.type == 'host' ? 'Host ' : '' }}{{view.title}}</h2>
 
   <div v-if="view.type == 'cluster'" id="clusters">
     <Cluster :cluster="viewObj" :token="session.token" :state="state" />
@@ -147,6 +157,8 @@
   </form>
 </template>
   </div>
+  </main>
+  </div>
 </template>
 </div>
 </body>