Fix style shift
This commit is contained in:
Rafael
Thomas Zarebczan
parent
ca755d37b3
commit
33826ea652
2 changed files with 90 additions and 79 deletions
|
|
@ -1,6 +1,9 @@
|
||||||
// @flow
|
// @flow
|
||||||
import 'scss/component/_header.scss';
|
import 'scss/component/_header.scss';
|
||||||
|
|
||||||
|
// $FlowFixMe
|
||||||
|
import { Global } from '@emotion/react';
|
||||||
|
|
||||||
import { Menu as MuiMenu, MenuItem as MuiMenuItem } from '@mui/material';
|
import { Menu as MuiMenu, MenuItem as MuiMenuItem } from '@mui/material';
|
||||||
import * as ICONS from 'constants/icons';
|
import * as ICONS from 'constants/icons';
|
||||||
import * as PAGES from 'constants/pages';
|
import * as PAGES from 'constants/pages';
|
||||||
|
|
@ -26,93 +29,97 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
|
||||||
|
|
||||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||||
const open = Boolean(anchorEl);
|
const open = Boolean(anchorEl);
|
||||||
const handleClick = (event) => {
|
const handleClick = (event) => setAnchorEl(!anchorEl ? event.currentTarget : null);
|
||||||
setAnchorEl(!anchorEl ? event.currentTarget : null);
|
const handleClose = () => setAnchorEl(null);
|
||||||
};
|
|
||||||
const handleClose = () => {
|
|
||||||
setAnchorEl(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const activeChannelUrl = activeChannelClaim && activeChannelClaim.permanent_url;
|
const activeChannelUrl = activeChannelClaim && activeChannelClaim.permanent_url;
|
||||||
// activeChannel will be: undefined = fetching, null = nothing, or { channel claim }
|
// activeChannel will be: undefined = fetching, null = nothing, or { channel claim }
|
||||||
const noActiveChannel = activeChannelUrl === null;
|
const noActiveChannel = activeChannelUrl === null;
|
||||||
const pendingChannelFetch = !noActiveChannel && myChannelClaimIds === undefined;
|
const pendingChannelFetch = !noActiveChannel && myChannelClaimIds === undefined;
|
||||||
|
|
||||||
return (
|
const menuProps = {
|
||||||
<div className="header__buttons">
|
id: 'basic-menu',
|
||||||
{pendingChannelFetch ? (
|
anchorEl,
|
||||||
<Skeleton variant="circular" animation="wave" className="header__navigationItem--iconSkeleton" />
|
open,
|
||||||
) : (
|
onClose: handleClose,
|
||||||
<Button
|
MenuListProps: {
|
||||||
id="basic-button"
|
'aria-labelledby': 'basic-button',
|
||||||
aria-controls={open ? 'basic-menu' : undefined}
|
sx: { padding: 'var(--spacing-xs)' },
|
||||||
aria-haspopup="true"
|
},
|
||||||
aria-expanded={open ? 'true' : undefined}
|
className: 'menu__list--header',
|
||||||
onClick={handleClick}
|
sx: { 'z-index': 2 },
|
||||||
className={classnames('header__navigationItem', {
|
PaperProps: { className: 'MuiMenu-list--paper' },
|
||||||
'header__navigationItem--icon': !activeChannelUrl,
|
};
|
||||||
'header__navigationItem--profilePic': activeChannelUrl,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{activeChannelUrl ? (
|
|
||||||
<ChannelThumbnail uri={activeChannelUrl} hideTooltip small noLazyLoad showMemberBadge />
|
|
||||||
) : (
|
|
||||||
<Icon size={18} icon={ICONS.ACCOUNT} aria-hidden />
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
{authenticated ? (
|
|
||||||
<MuiMenu
|
|
||||||
id="basic-menu"
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
open={open}
|
|
||||||
onClose={handleClose}
|
|
||||||
MenuListProps={{
|
|
||||||
'aria-labelledby': 'basic-button',
|
|
||||||
sx: { padding: 'var(--spacing-xs)' },
|
|
||||||
}}
|
|
||||||
className="menu__list--header"
|
|
||||||
sx={{ 'z-index': 2 }}
|
|
||||||
PaperProps={{ className: 'MuiMenu-list--paper' }}
|
|
||||||
>
|
|
||||||
<HeaderMenuLink useMui page={PAGES.UPLOADS} icon={ICONS.PUBLISH} name={__('Uploads')} />
|
|
||||||
<HeaderMenuLink useMui page={PAGES.CHANNELS} icon={ICONS.CHANNEL} name={__('Channels')} />
|
|
||||||
<HeaderMenuLink useMui page={PAGES.CREATOR_DASHBOARD} icon={ICONS.ANALYTICS} name={__('Creator Analytics')} />
|
|
||||||
<HeaderMenuLink useMui page={PAGES.REWARDS} icon={ICONS.REWARDS} name={__('Rewards')} />
|
|
||||||
<HeaderMenuLink useMui page={PAGES.INVITE} icon={ICONS.INVITE} name={__('Invites')} />
|
|
||||||
<HeaderMenuLink useMui page={PAGES.ODYSEE_MEMBERSHIP} icon={ICONS.UPGRADE} name={__('Odysee Premium')} />
|
|
||||||
<ChannelSelector storeSelection isHeaderMenu />
|
|
||||||
|
|
||||||
<MuiMenuItem onClick={signOut} sx={{ padding: '0px' }}>
|
return (
|
||||||
<div className="menu__link" style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
|
<>
|
||||||
<div>
|
{open && (
|
||||||
<Icon aria-hidden icon={ICONS.SIGN_OUT} />
|
<Global
|
||||||
{__('Sign Out')}
|
styles={{
|
||||||
</div>
|
body: {
|
||||||
<span className="menu__link-help">{email}</span>
|
'overflow-y': 'scroll !important',
|
||||||
</div>
|
'padding-right': '0px !important',
|
||||||
</MuiMenuItem>
|
},
|
||||||
</MuiMenu>
|
|
||||||
) : (
|
|
||||||
<MuiMenu
|
|
||||||
id="basic-menu"
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
open={open}
|
|
||||||
onClose={handleClose}
|
|
||||||
MenuListProps={{
|
|
||||||
'aria-labelledby': 'basic-button',
|
|
||||||
sx: { padding: 'var(--spacing-xs)' },
|
|
||||||
}}
|
}}
|
||||||
className="menu__list--header"
|
/>
|
||||||
sx={{ 'z-index': 2 }}
|
|
||||||
PaperProps={{ className: 'MuiMenu-list--paper' }}
|
|
||||||
>
|
|
||||||
<HeaderMenuLink useMui page={PAGES.AUTH_SIGNIN} icon={ICONS.SIGN_IN} name={__('Log In')} />
|
|
||||||
<HeaderMenuLink useMui page={PAGES.AUTH} icon={ICONS.SIGN_UP} name={__('Sign Up')} />
|
|
||||||
<HeaderMenuLink useMui page={PAGES.SETTINGS} icon={ICONS.SETTINGS} name={__('Settings')} />
|
|
||||||
<HeaderMenuLink useMui page={PAGES.HELP} icon={ICONS.HELP} name={__('Help')} />
|
|
||||||
</MuiMenu>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
|
<div className="header__buttons">
|
||||||
|
{pendingChannelFetch ? (
|
||||||
|
<Skeleton variant="circular" animation="wave" className="header__navigationItem--iconSkeleton" />
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
id="basic-button"
|
||||||
|
aria-controls={open ? 'basic-menu' : undefined}
|
||||||
|
aria-haspopup="true"
|
||||||
|
aria-expanded={open ? 'true' : undefined}
|
||||||
|
onClick={handleClick}
|
||||||
|
className={classnames('header__navigationItem', {
|
||||||
|
'header__navigationItem--icon': !activeChannelUrl,
|
||||||
|
'header__navigationItem--profilePic': activeChannelUrl,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{activeChannelUrl ? (
|
||||||
|
<ChannelThumbnail uri={activeChannelUrl} hideTooltip small noLazyLoad showMemberBadge />
|
||||||
|
) : (
|
||||||
|
<Icon size={18} icon={ICONS.ACCOUNT} aria-hidden />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{authenticated ? (
|
||||||
|
<MuiMenu {...menuProps}>
|
||||||
|
<HeaderMenuLink useMui page={PAGES.UPLOADS} icon={ICONS.PUBLISH} name={__('Uploads')} />
|
||||||
|
<HeaderMenuLink useMui page={PAGES.CHANNELS} icon={ICONS.CHANNEL} name={__('Channels')} />
|
||||||
|
<HeaderMenuLink
|
||||||
|
useMui
|
||||||
|
page={PAGES.CREATOR_DASHBOARD}
|
||||||
|
icon={ICONS.ANALYTICS}
|
||||||
|
name={__('Creator Analytics')}
|
||||||
|
/>
|
||||||
|
<HeaderMenuLink useMui page={PAGES.REWARDS} icon={ICONS.REWARDS} name={__('Rewards')} />
|
||||||
|
<HeaderMenuLink useMui page={PAGES.INVITE} icon={ICONS.INVITE} name={__('Invites')} />
|
||||||
|
<HeaderMenuLink useMui page={PAGES.ODYSEE_MEMBERSHIP} icon={ICONS.UPGRADE} name={__('Odysee Premium')} />
|
||||||
|
<ChannelSelector storeSelection isHeaderMenu />
|
||||||
|
|
||||||
|
<MuiMenuItem onClick={signOut} sx={{ padding: '0px' }}>
|
||||||
|
<div className="menu__link" style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
|
||||||
|
<div>
|
||||||
|
<Icon aria-hidden icon={ICONS.SIGN_OUT} />
|
||||||
|
{__('Sign Out')}
|
||||||
|
</div>
|
||||||
|
<span className="menu__link-help">{email}</span>
|
||||||
|
</div>
|
||||||
|
</MuiMenuItem>
|
||||||
|
</MuiMenu>
|
||||||
|
) : (
|
||||||
|
<MuiMenu {...menuProps}>
|
||||||
|
<HeaderMenuLink useMui page={PAGES.AUTH_SIGNIN} icon={ICONS.SIGN_IN} name={__('Log In')} />
|
||||||
|
<HeaderMenuLink useMui page={PAGES.AUTH} icon={ICONS.SIGN_UP} name={__('Sign Up')} />
|
||||||
|
<HeaderMenuLink useMui page={PAGES.SETTINGS} icon={ICONS.SETTINGS} name={__('Settings')} />
|
||||||
|
<HeaderMenuLink useMui page={PAGES.HELP} icon={ICONS.HELP} name={__('Help')} />
|
||||||
|
</MuiMenu>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -31,6 +31,10 @@ reach-portal {
|
||||||
max-width: calc(100% - var(--height-button) - var(--spacing-xs));
|
max-width: calc(100% - var(--height-button) - var(--spacing-xs));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.MuiMenu-list--paper {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
[data-reach-menu-list],
|
[data-reach-menu-list],
|
||||||
.MuiMenu-list--paper {
|
.MuiMenu-list--paper {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue