From bc73665b1202ae7cdeab74e84111eb290874f45f Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Thu, 26 Dec 2019 12:46:57 +0100
Subject: [PATCH] Elem text wrapped <li> and active icon ref fixed.

Supplementary and content text are now wrapped in a <li> item. This with
better styling selectors formats the icon correctly alongside the text.
Fixed active icon ref function that had an incorrect if statement so the
activeIconRef would never be returned.
---
 src/components/ui/sidebarListElem.vue | 72 ++++++++++++++++-----------
 1 file changed, 44 insertions(+), 28 deletions(-)

diff --git a/src/components/ui/sidebarListElem.vue b/src/components/ui/sidebarListElem.vue
index de69e41..c91e894 100644
--- a/src/components/ui/sidebarListElem.vue
+++ b/src/components/ui/sidebarListElem.vue
@@ -1,16 +1,18 @@
 <template>
   <div>
-    <a @click="$emit('click')"><li>
-      <figure :class="activeClassIfActive">
-        <svg><use :xlink:href="iconRefNameIfActive"/></svg>
-      </figure>
+    <a @click="$emit('click')">
+      <li>
+        <figure :class="activeClassIfActive">
+          <svg class="icon"><use :xlink:href="iconRefNameIfActive"/></svg>
+        </figure>
 
-      <span :class="activeClassIfActive">{{ contentTextToDisplay }}</span>
+        <span class="text" :class="activeClassIfActive">{{ contentTextToDisplay }}</span>
 
-      <span v-if="supplementaryText" class="supplementary-text">
-        {{ supplementaryText }}
-      </span>
-    </li></a>
+        <span v-if="supplementaryText" class="supplementary-text">
+          {{ supplementaryText }}
+        </span>
+      </li>
+    </a>
   </div>
 </template>
 
@@ -44,7 +46,7 @@ export default {
     iconRefNameIfActive() {
       const { iconRefActive, iconRef, active } = this
 
-      if ((iconRefActive && iconRef) & active) {
+      if ((iconRefActive && iconRef) && active) {
         return iconRefActive
       }
       return iconRef
@@ -85,37 +87,51 @@ li {
   &:hover {
     color: $text-color-70;
     cursor: pointer;
+
+    .icon {
+      fill: $text-color-70;
+      cursor: pointer;
+        transform: scale(1.1, 1.1);
+    }
   }
   .active {
     color: $text-color;
+
+    .icon {
+      fill: $green;
+    }
   }
   .pending {
     color: #f8bd2d;
   }
 
+  .text {
+    margin-left: 26px;
+  }
+
   .supplementary-text {
     flex-grow: 1;
     text-align: right;
   }
 
-  figure, figure > svg {
-    width: 18px;
-    height: 18px;
-    margin: 0 7px 0 0;
-    fill: $text-color-50;
-    transition: fill 0.5s ease, transform 0.5s ease;
-    &.waiting {
-      transform: scale(0.8, 0.8);
-    }
-    &.pending {
-      fill: #f8bd2d;
-    }
-    &:hover &-icon {
-      fill: $text-color-70;
-      cursor: pointer;
-    }
-    &.active > svg {
-      fill: $green;
+  figure {
+    position: absolute;
+
+    > svg {
+      position: relative;
+      top: 50%;
+      width: 16px;
+      height: 16px;
+      margin: 0 7px 0 0;
+      fill: $text-color-50;
+      transition: fill 0.5s ease, transform 0.5s ease;
+
+      & .waiting {
+        transform: scale(0.8, 0.8);
+      }
+      & .pending {
+        fill: #f8bd2d;
+      }
     }
   }
 }