From 895154dab92a5b55b5a54aef77143405504fb7ef Mon Sep 17 00:00:00 2001
From: Dalton <dalton.hill2022@gmail.com>
Date: Wed, 12 Feb 2020 19:48:28 -0600
Subject: [PATCH] added Sean's changes back in

---
 ui/component/navigationButton/view.jsx | 11 +++++++----
 ui/component/router/view.jsx           | 21 ++++++++++++--------
 ui/scss/component/_header.scss         | 27 +++++++++++++++++---------
 ui/scss/component/menu-button.scss     |  2 ++
 4 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/ui/component/navigationButton/view.jsx b/ui/component/navigationButton/view.jsx
index a9f2fbb1c..72c9cb017 100644
--- a/ui/component/navigationButton/view.jsx
+++ b/ui/component/navigationButton/view.jsx
@@ -9,7 +9,7 @@ const MAX_HISTORY_SIZE = 12;
 type Props = {
   isBackward: boolean,
   history: {
-    entries: { key: string, title: string }[],
+    entries: Array<{ key: string, title: string, pathname: string }>,
     go: number => void,
     goBack: () => void,
     goForward: () => void,
@@ -44,19 +44,22 @@ const NavigationButton = (props: Props) => {
 
   // creates an <li> intended for the button's <ul>
   const makeItem = useCallback(
-    (entry, index) => {
+    (entry: { pathname: string, title: string, key: string }, index: number) => {
       // difference between the current index and the index of the entry
       const backwardDif = index - (currentIndex < MAX_HISTORY_SIZE ? currentIndex : MAX_HISTORY_SIZE);
       const forwardDif = index + 1;
       return (
         <li
+          className="header__navigation-button"
+          role="link"
           key={entry.key}
           onMouseDown={() => {
             setShowHistory(false);
             go(isBackward ? backwardDif : forwardDif);
           }}
         >
-          {entry.title}
+          <span>{entry.title}</span>
+          <span className="header__navigation-button-help">{entry.pathname === '/' ? __('Home') : entry.pathname}</span>
         </li>
       );
     },
@@ -81,7 +84,7 @@ const NavigationButton = (props: Props) => {
         iconSize={18}
         disabled={slicedEntries.length === 0}
       />
-      {showHistory && <ul className={'header__navigaiton-dropdown'}>{slicedEntries.map(makeItem)}</ul>}
+      {showHistory && <ul className={'header__navigation-dropdown'}>{slicedEntries.map(makeItem)}</ul>}
     </div>
   );
 };
diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx
index 83055eee8..f176b56e3 100644
--- a/ui/component/router/view.jsx
+++ b/ui/component/router/view.jsx
@@ -88,17 +88,22 @@ function AppRouter(props: Props) {
     uri,
     title,
   } = props;
-  const { channelName, streamName } = parseURI(uri);
   const { entries } = history;
   const entryIndex = history.index;
 
   useEffect(() => {
-    if (typeof title !== 'undefined' && title !== '') {
-      document.title = title;
-    } else if (typeof streamName !== 'undefined' && streamName !== 'undefined' && streamName !== '') {
-      document.title = streamName;
-    } else if (typeof channelName !== 'undefined' && channelName !== '') {
-      document.title = channelName;
+    if (uri) {
+      const { channelName, streamName } = parseURI(uri);
+
+      if (typeof title !== 'undefined' && title !== '') {
+        document.title = title;
+      } else if (streamName) {
+        document.title = streamName;
+      } else if (channelName) {
+        document.title = channelName;
+      } else {
+        document.title = IS_WEB ? SITE_TITLE : 'LBRY';
+      }
     } else {
       document.title = IS_WEB ? SITE_TITLE : 'LBRY';
     }
@@ -109,7 +114,7 @@ function AppRouter(props: Props) {
     return () => {
       document.title = IS_WEB ? SITE_TITLE : 'LBRY';
     };
-  }, [channelName, entries, entryIndex, streamName, title]);
+  }, [entries, entryIndex, title, uri]);
 
   useEffect(() => {
     window.scrollTo(0, currentScroll);
diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss
index 4fa307695..ecc7e36b4 100644
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@@ -148,19 +148,28 @@
   margin: 0 var(--spacing-medium);
 }
 
-.header__navigaiton-dropdown {
+.header__navigation-dropdown {
+  @extend .menu__list--header;
+  padding: 0;
   position: absolute;
   list-style-type: none;
   background-color: var(--color-header-background);
-  margin-top: 19px;
+}
 
-  li {
-    margin: 0;
-    padding: 2px 5px;
+.header__navigation-button {
+  margin: 0;
+  padding: var(--spacing-miniscule) var(--spacing-medium);
+  display: flex;
+  align-items: center;
 
-    &:hover {
-      cursor: pointer;
-      background-color: var(--color-menu-background--active);
-    }
+  &:hover {
+    cursor: pointer;
+    background-color: var(--color-menu-background--active);
   }
 }
+
+.header__navigation-button-help {
+  @extend .help;
+  margin-top: 0;
+  margin-left: var(--spacing-small);
+}
diff --git a/ui/scss/component/menu-button.scss b/ui/scss/component/menu-button.scss
index c1f3896bb..ed03adcc1 100644
--- a/ui/scss/component/menu-button.scss
+++ b/ui/scss/component/menu-button.scss
@@ -55,6 +55,8 @@
   margin-left: calc(var(--spacing-medium) * -1);
   box-shadow: var(--card-box-shadow);
   animation: menu-animate-in var(--animation-duration) var(--animation-style);
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
 }
 
 .menu__link {