From 6ebb000cb3d0ef41aa02855d0e4c0db9e53a466a Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Tue, 24 Aug 2021 18:14:37 -0400
Subject: [PATCH] Navigate to "subscriptions" on logo click (#1394)

* Updated logo to navigate to "subscriptions" on click

* accessibility improvements

* don't change backgroud color on hover
---
 src/renderer/components/top-nav/top-nav.js   |  4 +++-
 src/renderer/components/top-nav/top-nav.sass |  6 ++++++
 src/renderer/components/top-nav/top-nav.vue  | 10 +++++++++-
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 4279455ac..4dbc9f06a 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -277,7 +277,9 @@ export default Vue.extend({
         // Web placeholder
       }
     },
-
+    navigate: function (route) {
+      this.$router.push('/' + route)
+    },
     ...mapActions([
       'showToast',
       'getYoutubeUrlInfo',
diff --git a/src/renderer/components/top-nav/top-nav.sass b/src/renderer/components/top-nav/top-nav.sass
index 4d63b0bc4..19877f869 100644
--- a/src/renderer/components/top-nav/top-nav.sass
+++ b/src/renderer/components/top-nav/top-nav.sass
@@ -85,7 +85,13 @@
     display: flex
     align-items: center
     padding: 0px 25px 0px 10px
+    cursor: pointer
 
+    &:active
+      background-color: var(--tertiary-text-color)
+      transition: background 0.2s ease-in
+      @include top-nav-is-colored
+        background-color: var(--primary-color-active)
     .logoIcon
       background-image: var(--logo-icon)
       background-repeat: no-repeat
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index efdd22f93..d4a09ee34 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -44,7 +44,15 @@
         :title="newWindowText"
         @click="createNewWindow"
       />
-      <div class="logo">
+      <div
+        class="logo"
+        role="link"
+        tabindex="0"
+        :title="$t('Subscriptions.Subscriptions')"
+        @click="navigate('subscriptions')"
+        @keydown.space.prevent="navigate('subscriptions')"
+        @keydown.enter.prevent="navigate('subscriptions')"
+      >
         <div
           class="logoIcon"
         />