Update nav icon titles to reflect new behavior, & make their title text show even when disabled

Author: kommunarr

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

@@ -95,11 +95,11 @@ export default defineComponent({
     },
 
     forwardText: function () {
-      return this.$t('Forward')
+      return this.$t('Click to go forward, right-click or hold to see history')
     },
 
     backwardText: function () {
-      return this.$t('Back')
+      return this.$t('Click to go back, right-click or hold to see history')
     },
 
     newWindowText: function () {

src/renderer/components/top-nav/top-nav.scss

@@ -53,12 +53,14 @@
 
 .arrowDisabled :deep(.iconButton) {
   color: #808080;
+  background-color: inherit;
   opacity: 0.5;
-  pointer-events: none;
+  pointer-events: auto;
+  cursor: default;
   user-select: none;
 }
 
-.navIcon, :deep(.iconButton) {
+.navIcon, :deep(.ftIconButton:not(.arrowDisabled) .iconButton) {
   border-radius: 50%;
   color: var(--primary-text-color);
   cursor: pointer;
@@ -82,7 +84,7 @@
   }
 }
 
-.topNavBarColor .navIcon, .topNavBarColor :deep(.iconButton)  {
+.topNavBarColor .navIcon, .topNavBarColor :deep(.ftIconButton:not(.arrowDisabled) .iconButton)  {
   &:hover {
     background-color: var(--primary-color-hover);
   }

static/locales/en-US.yaml

@@ -27,8 +27,8 @@ Toggle fullscreen: Toggle fullscreen
 Window: Window
 Minimize: Minimize
 Close: Close
-Back: Back
-Forward: Forward
+Click to go back, right-click or hold to see history: Click to go back, right-click or hold to see history
+Click to go forward, right-click or hold to see history: Click to go forward, right-click or hold to see history
 Open New Window: Open New Window
 Go to page: Go to {page}
 Close Banner: Close Banner