Fix double focus on the sidebar channels (#2749)

src/renderer/components/side-nav/side-nav.css

@@ -69,7 +69,6 @@
 .navOption .navLabel {
   margin-left: 40px;
   overflow: hidden;
-  margin-left: 40px;
   word-break: break-word;
 }
 
@@ -90,6 +89,7 @@
 }
 
 .channelLink {
+  display: block;
   color: inherit;
   text-decoration: inherit;
 }
@@ -97,6 +97,7 @@
 .channelThumbnail {
   border-radius: 50%;
   width: 35px;
+  vertical-align: middle;
 }
 
 .closed {

src/renderer/components/side-nav/side-nav.js

@@ -76,9 +76,6 @@ export default Vue.extend({
   methods: {
     navigate: function (route) {
       this.$router.push('/' + route)
-    },
-    goToChannel: function (id) {
-      this.$router.push({ path: `/channel/${id}` })
     }
   }
 })

src/renderer/components/side-nav/side-nav.vue

@@ -218,36 +218,29 @@
       <div
         v-if="!hideActiveSubscriptions"
       >
-        <div
+        <router-link
           v-for="(channel, index) in activeSubscriptions"
           :key="index"
-          class="navChannel mobileHidden"
+          :to="`/channel/${channel.id}`"
+          class="navChannel channelLink mobileHidden"
           :title="channel.name"
           role="button"
-          tabindex="0"
-          @keydown.enter.prevent="goToChannel(channel.id)"
-          @click="goToChannel(channel.id)"
         >
-          <router-link
+          <div
-            :to="`/channel/${channel.id}`"
+            class="thumbnailContainer"
-            class="channelLink"
           >
-            <div
+            <img
-              class="thumbnailContainer"
+              class="channelThumbnail"
+              :src="channel.thumbnail"
             >
-              <img
+          </div>
-                class="channelThumbnail"
+          <p
-                :src="channel.thumbnail"
+            v-if="isOpen"
-              >
+            class="navLabel"
-            </div>
+          >
-            <p
+            {{ channel.name }}
-              v-if="isOpen"
+          </p>
-              class="navLabel"
+        </router-link>
-            >
-              {{ channel.name }}
-            </p>
-          </router-link>
-        </div>
       </div>
     </div>
   </ft-flex-box>