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
intended for the button's
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 (
- {
setShowHistory(false);
go(isBackward ? backwardDif : forwardDif);
}}
>
- {entry.title}
+ {entry.title}
+ {entry.pathname === '/' ? __('Home') : entry.pathname}
);
},
@@ -81,7 +84,7 @@ const NavigationButton = (props: Props) => {
iconSize={18}
disabled={slicedEntries.length === 0}
/>
- {showHistory && {slicedEntries.map(makeItem)}
}
+ {showHistory && {slicedEntries.map(makeItem)}
}
);
};
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 {