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,19 +218,13 @@
       <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
-            :to="`/channel/${channel.id}`"
-            class="channelLink"
         >
           <div
             class="thumbnailContainer"
@@ -249,7 +243,6 @@
         </router-link>
       </div>
     </div>
-    </div>
   </ft-flex-box>
 </template>