ui rework

ui/index.html

@@ -21,21 +21,16 @@
 
 <div id="app">
 <header>
-    <div id="logo">
-        <img src="favicon.ico" />
-        <span>Direktil Local Server</span>
-    </div>
-    <div class="utils">
+    <span id="logo"><img src="favicon.ico" /> Direktil Local Server</span>
+    <span class="utils">
         <span id="login-hdr" v-if="session.token">
             Logged in
             <button class="link" @click="copyText(session.token)">&#x1F5D0;</button>
         </span>
-
         <span>server <code>{{ serverVersion || '-----' }}</code></span>
         <span>ui     <code>{{ uiHash || '-----' }}</code></span>
-
         <span :class="publicState ? 'green' : 'red'">&#x1F5F2;</span>
-    </div>
+    </span>
 </header>
 
 <div class="error" v-if="error">
@@ -44,6 +39,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 +80,17 @@
 </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>
+  <nav class="sidebar">
+    <input type="search" placeholder="Filter" v-model="viewFilter"/>
+    <p class="nav-section">Admin</p>
+    <p class="view-links"><button type="button" v-for="v in adminViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
+    <p class="nav-section" v-if="clusterViews.length">Clusters</p>
+    <p class="view-links" v-if="clusterViews.length"><button type="button" v-for="v in clusterViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
+    <p class="nav-section" v-if="hostViews.length">Hosts</p>
+    <p class="view-links" v-if="hostViews.length"><button type="button" v-for="v in hostViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></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 +151,7 @@
   </form>
 </template>
   </div>
+  </main>
 </template>
 </div>
 </body>