From f33ad2e5f037f7c01821a287a2e0715df2e2b68b Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Thu, 20 Oct 2022 08:04:49 +0200
Subject: [PATCH] Fix double focus on the sidebar channels (#2749)

---
 src/renderer/components/side-nav/side-nav.css |  3 +-
 src/renderer/components/side-nav/side-nav.js  |  3 --
 src/renderer/components/side-nav/side-nav.vue | 39 ++++++++-----------
 3 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 738c3961..8ff29f6c 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/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 {
diff --git a/src/renderer/components/side-nav/side-nav.js b/src/renderer/components/side-nav/side-nav.js
index 96945540..58a13a82 100644
--- a/src/renderer/components/side-nav/side-nav.js
+++ b/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}` })
     }
   }
 })
diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
index 34b07add..e248cdb5 100644
--- a/src/renderer/components/side-nav/side-nav.vue
+++ b/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
-            :to="`/channel/${channel.id}`"
-            class="channelLink"
+          <div
+            class="thumbnailContainer"
           >
-            <div
-              class="thumbnailContainer"
+            <img
+              class="channelThumbnail"
+              :src="channel.thumbnail"
             >
-              <img
-                class="channelThumbnail"
-                :src="channel.thumbnail"
-              >
-            </div>
-            <p
-              v-if="isOpen"
-              class="navLabel"
-            >
-              {{ channel.name }}
-            </p>
-          </router-link>
-        </div>
+          </div>
+          <p
+            v-if="isOpen"
+            class="navLabel"
+          >
+            {{ channel.name }}
+          </p>
+        </router-link>
       </div>
     </div>
   </ft-flex-box>