LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Transform route-leading menu items to hyperlinks (#191)

Browse source
This commit is contained in:
Rodion Borisov 2021-11-03 17:50:03 +03:00 committed by GitHub
parent 842431feaf
commit 6d8e265f50
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
ui/component/header/view.jsx
View file

@ -5,11 +5,12 @@ import * as SETTINGS from 'constants/settings';
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
import React from 'react'; import React from 'react';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
import { Link } from 'react-router-dom';
import classnames from 'classnames'; import classnames from 'classnames';
import Button from 'component/button'; import Button from 'component/button';
import WunderBar from 'component/wunderbar'; import WunderBar from 'component/wunderbar';
import Icon from 'component/common/icon'; import Icon from 'component/common/icon';
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button'; import { Menu, MenuList, MenuButton, MenuItem, MenuLink } from '@reach/menu-button';
import NavigationButton from 'component/navigationButton'; import NavigationButton from 'component/navigationButton';
import { useIsMobile } from 'effects/use-screensize'; import { useIsMobile } from 'effects/use-screensize';
import NotificationBubble from 'component/notificationBubble'; import NotificationBubble from 'component/notificationBubble';
@ -324,26 +325,26 @@ const Header = (props: Props) => {
)} )}
</MenuButton> </MenuButton>
<MenuList className="menu__list--header"> <MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.UPLOADS}`)}> <MenuLink className="menu__link" as={Link} to={`/$/${PAGES.UPLOADS}`}>
<Icon aria-hidden icon={ICONS.PUBLISH} /> <Icon aria-hidden icon={ICONS.PUBLISH} />
{__('Uploads')} {__('Uploads')}
</MenuItem> </MenuLink>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CHANNELS}`)}> <MenuLink className="menu__link" as={Link} to={`/$/${PAGES.CHANNELS}`}>
<Icon aria-hidden icon={ICONS.CHANNEL} /> <Icon aria-hidden icon={ICONS.CHANNEL} />
{__('Channels')} {__('Channels')}
</MenuItem> </MenuLink>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CREATOR_DASHBOARD}`)}> <MenuLink className="menu__link" as={Link} to={`/$/${PAGES.CREATOR_DASHBOARD}`}>
<Icon aria-hidden icon={ICONS.ANALYTICS} /> <Icon aria-hidden icon={ICONS.ANALYTICS} />
{__('Creator Analytics')} {__('Creator Analytics')}
</MenuItem> </MenuLink>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.REWARDS}`)}> <MenuLink className="menu__link" as={Link} to={`/$/${PAGES.REWARDS}`}>
<Icon aria-hidden icon={ICONS.REWARDS} /> <Icon aria-hidden icon={ICONS.REWARDS} />
{__('Rewards')} {__('Rewards')}
</MenuItem> </MenuLink>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.INVITE}`)}> <MenuLink className="menu__link" as={Link} to={`/$/${PAGES.INVITE}`}>
<Icon aria-hidden icon={ICONS.INVITE} /> <Icon aria-hidden icon={ICONS.INVITE} />
{__('Invites')} {__('Invites')}
</MenuItem> </MenuLink>
{authenticated ? ( {authenticated ? (
<MenuItem onSelect={IS_WEB ? signOut : openSignOutModal}> <MenuItem onSelect={IS_WEB ? signOut : openSignOutModal}>
@ -355,14 +356,14 @@ const Header = (props: Props) => {
</MenuItem> </MenuItem>
) : !IS_WEB ? ( ) : !IS_WEB ? (
<> <>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH}`)}> <MenuLink className="menu__link" as={Link} to={`/$/${PAGES.AUTH}`}>
<Icon aria-hidden icon={ICONS.SIGN_UP} /> <Icon aria-hidden icon={ICONS.SIGN_UP} />
{__('Sign Up')} {__('Sign Up')}
</MenuItem> </MenuLink>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH_SIGNIN}`)}> <MenuLink className="menu__link" as={Link} to={`/$/${PAGES.AUTH_SIGNIN}`}>
<Icon aria-hidden icon={ICONS.SIGN_IN} /> <Icon aria-hidden icon={ICONS.SIGN_IN} />
{__('Sign In')} {__('Sign In')}
</MenuItem> </MenuLink>
</> </>
) : null} ) : null}
</MenuList> </MenuList>
@ -409,7 +410,7 @@ type HeaderMenuButtonProps = {
}; };
function HeaderMenuButtons(props: HeaderMenuButtonProps) { function HeaderMenuButtons(props: HeaderMenuButtonProps) {
const { authenticated, notificationsEnabled, history, handleThemeToggle, currentTheme, livestreamEnabled } = props; const { authenticated, notificationsEnabled, handleThemeToggle, currentTheme, livestreamEnabled } = props;
return ( return (
<div className="header__buttons"> <div className="header__buttons">
@ -429,25 +430,25 @@ function HeaderMenuButtons(props: HeaderMenuButtonProps) {
</MenuButton> </MenuButton>
<MenuList className="menu__list--header"> <MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.UPLOAD}`)}> <MenuLink className="menu__link" as={Link} to={`/$/${PAGES.UPLOAD}`}>
<Icon aria-hidden icon={ICONS.PUBLISH} /> <Icon aria-hidden icon={ICONS.PUBLISH} />
{__('Upload')} {__('Upload')}
</MenuItem> </MenuLink>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CHANNEL_NEW}`)}> <MenuLink className="menu__link" as={Link} to={`/$/${PAGES.CHANNEL_NEW}`}>
<Icon aria-hidden icon={ICONS.CHANNEL} /> <Icon aria-hidden icon={ICONS.CHANNEL} />
{__('New Channel')} {__('New Channel')}
</MenuItem> </MenuLink>
{/* @if TARGET='web' */} {/* @if TARGET='web' */}
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.YOUTUBE_SYNC}`)}> <MenuLink className="menu__link" as={Link} to={`/$/${PAGES.YOUTUBE_SYNC}`}>
<Icon aria-hidden icon={ICONS.YOUTUBE} /> <Icon aria-hidden icon={ICONS.YOUTUBE} />
{__('Sync YouTube Channel')} {__('Sync YouTube Channel')}
</MenuItem> </MenuLink>
{/* @endif */} {/* @endif */}
{livestreamEnabled && ( {livestreamEnabled && (
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.LIVESTREAM}`)}> <MenuLink className="menu__link" as={Link} to={`/$/${PAGES.LIVESTREAM}`}>
<Icon aria-hidden icon={ICONS.VIDEO} /> <Icon aria-hidden icon={ICONS.VIDEO} />
{__('Go Live')} {__('Go Live')}
</MenuItem> </MenuLink>
)} )}
</MenuList> </MenuList>
</Menu> </Menu>
@ -469,14 +470,14 @@ function HeaderMenuButtons(props: HeaderMenuButtonProps) {
<Icon size={18} icon={ICONS.SETTINGS} aria-hidden /> <Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
</MenuButton> </MenuButton>
<MenuList className="menu__list--header"> <MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.SETTINGS}`)}> <MenuLink className="menu__link" as={Link} to={`/$/${PAGES.SETTINGS}`}>
<Icon aria-hidden tooltip icon={ICONS.SETTINGS} /> <Icon aria-hidden tooltip icon={ICONS.SETTINGS} />
{__('Settings')} {__('Settings')}
</MenuItem> </MenuLink>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.HELP}`)}> <MenuLink className="menu__link" as={Link} to={`/$/${PAGES.HELP}`}>
<Icon aria-hidden icon={ICONS.HELP} /> <Icon aria-hidden icon={ICONS.HELP} />
{__('Help')} {__('Help')}
</MenuItem> </MenuLink>
<MenuItem className="menu__link" onSelect={handleThemeToggle}> <MenuItem className="menu__link" onSelect={handleThemeToggle}>
<Icon icon={currentTheme === 'light' ? ICONS.DARK : ICONS.LIGHT} /> <Icon icon={currentTheme === 'light' ? ICONS.DARK : ICONS.LIGHT} />
{currentTheme === 'light' ? __('Dark') : __('Light')} {currentTheme === 'light' ? __('Dark') : __('Light')}