Moved connect to a tabbed panel

src/App.vue

@@ -1,7 +1,6 @@
 <template>
   <div id="app">
-    <hostInput/>
+    <panelLeft/>
-    <hostDisplay/>
   </div>
 </template>
 
@@ -15,15 +14,13 @@ import Icons from 'uikit/dist/js/uikit-icons';
 UIkit.use(Icons);
 
 // Import components
-import hostInput from './components/hostInput.vue'
+import panelLeft from './components/panelLeft.vue'
-import hostDisplay from './components/hostDisplay'
 
 // Export main app
 export default {
   name: 'app',
   components: {
-    hostInput,
+    panelLeft
-    hostDisplay
   }
 }
 </script>
@@ -38,6 +35,11 @@ export default {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: left;
-  padding-left: 20px;
+  height: 100%
 }
+
+body, html {
+  height: 100%
+}
+
 </style>

src/assets/less/theme.less

@@ -71,7 +71,7 @@
 // Tab
 //
 
-@tab-item-padding-horizontal:                   20px;
+@tab-item-padding-horizontal:                   10px;
 @tab-item-padding-vertical:                     9px;
 @tab-item-border-width:                         2px;
 @tab-item-font-size:                            12px;

src/components/paneConnect.vue

@@ -0,0 +1,25 @@
+<template>
+  <div id="paneConnect">
+    <hostInput/>
+    <hostDisplay/>
+  </div>
+</template>
+
+<script>
+// Import components
+import hostInput from './paneConnectComponents/hostInput.vue'
+import hostDisplay from './paneConnectComponents/hostDisplay'
+
+// Export main app
+export default {
+  name: 'paneConnect',
+  components: {
+    hostInput,
+    hostDisplay
+  }
+}
+</script>
+
+<style lang="less">
+
+</style>

src/components/panelLeft.vue

@@ -0,0 +1,39 @@
+<template>
+  <div id="panelLeft">
+    <ul class="uk-flex-center" uk-tab>
+      <li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="Connect"></a></li>
+      <li><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="Navigate"></a></li>
+      <li><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="Capture"></a></li>
+      <li><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="Plugins"></a></li>
+      <li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="Configure"></a></li>
+    </ul>
+    <ul class="uk-switcher uk-margin">
+      <li><paneConnect/></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+// Import components
+import paneConnect from './paneConnect.vue'
+
+// Export main app
+export default {
+  name: 'panelLeft',
+  components: {
+    paneConnect,
+  }
+}
+</script>
+
+<style lang="less">
+#panelLeft {
+  width: 300px;
+  height:100%;
+  padding: 0 20px 0 20px;
+  background-color: #fafafa
+}
+.uk-tab {
+    padding-left: 0;
+}
+</style>