From c62dffbb0269ea6f0408e4ffd27a346fffd88042 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Sun, 1 Mar 2020 22:36:35 +0000
Subject: [PATCH] Added navigation labels

---
 src/components/genericComponents/tabIcon.vue | 23 ++++++++++++++++++--
 src/components/panelLeft.vue                 |  4 ++--
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/genericComponents/tabIcon.vue b/src/components/genericComponents/tabIcon.vue
index d2159fcb..a98cb7b0 100644
--- a/src/components/genericComponents/tabIcon.vue
+++ b/src/components/genericComponents/tabIcon.vue
@@ -7,6 +7,9 @@
     @click="setThisTab"
   >
     <slot></slot>
+    <div class="tabtitle">
+      {{ title }}
+    </div>
   </a>
 </template>
 
@@ -32,9 +35,15 @@ export default {
   },
 
   computed: {
+    title: function() {
+      // Get the last section of a fully qualified name
+      var topName = this.id.split(".").pop();
+      // Make first character uppercase, then add the rest of the string
+      return topName.charAt(0).toUpperCase() + topName.slice(1);
+    },
+
     tooltipOptions: function() {
-      var title = this.id.charAt(0).toUpperCase() + this.id.slice(1);
-      return `pos: right; title: ${title}; delay: 500`;
+      return `pos: right; title: ${this.title}; delay: 500`;
     },
 
     classObject: function() {
@@ -69,4 +78,14 @@ export default {
     color: @inverse-primary-muted-color !important;
   }
 }
+
+.tabtitle {
+  max-width: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tabtitle a :hover {
+  text-decoration: none;
+}
 </style>
diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 020a6512..e06fad85 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -7,7 +7,7 @@
     <!-- Vertical tab bar -->
     <div
       id="switcher-left"
-      class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1"
+      class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1 uk-text-center"
     >
       <tabIcon
         id="status"
@@ -254,7 +254,7 @@ export default {
 }
 
 #switcher-left a {
-  padding: 10px 16px;
+  padding: 10px 8px;
 }
 
 #switcher-left {