added Sean's changes back in

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>
   );
 };

ui/component/router/view.jsx

@@ -88,20 +88,25 @@ function AppRouter(props: Props) {
     uri,
     title,
   } = props;
-  const { channelName, streamName } = parseURI(uri);
   const { entries } = history;
   const entryIndex = history.index;
 
   useEffect(() => {
+    if (uri) {
+      const { channelName, streamName } = parseURI(uri);
+
       if (typeof title !== 'undefined' && title !== '') {
         document.title = title;
-    } else if (typeof streamName !== 'undefined' && streamName !== 'undefined' && streamName !== '') {
+      } else if (streamName) {
         document.title = streamName;
-    } else if (typeof channelName !== 'undefined' && channelName !== '') {
+      } else if (channelName) {
         document.title = channelName;
       } else {
         document.title = IS_WEB ? SITE_TITLE : 'LBRY';
       }
+    } else {
+      document.title = IS_WEB ? SITE_TITLE : 'LBRY';
+    }
 
     // @if TARGET='app'
     entries[entryIndex].title = document.title;
@@ -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);

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 {
+.header__navigation-button {
   margin: 0;
-    padding: 2px 5px;
+  padding: var(--spacing-miniscule) var(--spacing-medium);
+  display: flex;
+  align-items: center;
 
   &:hover {
     cursor: pointer;
     background-color: var(--color-menu-background--active);
   }
-  }
+}
+
+.header__navigation-button-help {
+  @extend .help;
+  margin-top: 0;
+  margin-left: var(--spacing-small);
 }

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 {