Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

NavMenu adapted to Popup changes

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-10-15 11:13:44 +03:00
parent b588fa08c9
commit 342e497df3
3 changed files with 90 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/common/NavBar/NavMenu/NavMenu.js
View file

@ -13,17 +13,27 @@ const NavMenu = ({ className }) => {
const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
const user = useUser();
const popupLabelOnClick = React.useCallback((event) => {
if (!event.nativeEvent.togglePopupPrevented) {
toggleMenu();
}
}, [toggleMenu]);
const popupMenuOnClick = React.useCallback((event) => {
event.nativeEvent.togglePopupPrevented = true;
}, []);
return (
<Popup
open={menuOpen}
direction={'bottom'}
onCloseRequest={closeMenu}
renderLabel={(ref) => (
<Button ref={ref} className={classnames(className, styles['nav-menu-label-container'], { 'active': menuOpen })} tabIndex={-1} onClick={toggleMenu}>
renderLabel={({ ref, className: popupLabelClassName, children }) => (
<Button ref={ref} className={classnames(className, popupLabelClassName, styles['nav-menu-label-container'], { 'active': menuOpen })} tabIndex={-1} onClick={popupLabelOnClick}>
<Icon className={styles['icon']} icon={'ic_more'} />
{children}
</Button>
)}
renderMenu={() => (
<div className={styles['nav-menu-container']}>
<div className={styles['nav-menu-container']} onClick={popupMenuOnClick}>
<div className={styles['user-info-container']}>
<div
className={styles['avatar-container']}

153
src/common/NavBar/NavMenu/styles.less
View file

@ -18,101 +18,100 @@
height: 50%;
fill: var(--color-surfacelighter);
}
}
.nav-menu-container {
min-width: 20rem;
max-width: 30rem;
background-color: var(--color-background);
.nav-menu-container {
width: 20rem;
background-color: var(--color-background);
.user-info-container {
display: grid;
height: 7rem;
grid-template-columns: 7rem 1fr;
grid-template-rows: 50% 50%;
grid-template-areas:
"avatar-area email-area"
"avatar-area logout-button-area";
.user-info-container {
display: grid;
height: 7rem;
grid-template-columns: 7rem 1fr;
grid-template-rows: 50% 50%;
grid-template-areas:
"avatar-area email-area"
"avatar-area logout-button-area";
.avatar-container {
grid-area: avatar-area;
padding: 1rem;
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-origin: content-box;
background-clip: content-box;
}
.email-container {
grid-area: email-area;
display: flex;
flex-direction: row;
align-items: center;
padding: 1rem 1rem 0 0;
.email-label {
flex: 1;
max-height: 2.4em;
color: var(--color-surfacelighter);
user-select: text;
.avatar-container {
grid-area: avatar-area;
padding: 1rem;
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-origin: content-box;
background-clip: content-box;
}
}
.logout-button-container {
grid-area: logout-button-area;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 1em 1rem 0;
.email-container {
grid-area: email-area;
display: flex;
flex-direction: row;
align-items: center;
padding: 1rem 1rem 0 0;
&:hover, &:focus {
outline: none;
.logout-label {
.email-label {
flex: 1;
max-height: 2.4em;
color: var(--color-surfacelighter);
text-decoration: underline;
user-select: text;
}
}
.logout-label {
flex: 1;
max-height: 2.4em;
color: var(--color-surface);
.logout-button-container {
grid-area: logout-button-area;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 1em 1rem 0;
&:hover, &:focus {
outline: none;
.logout-label {
color: var(--color-surfacelighter);
text-decoration: underline;
}
}
.logout-label {
flex: 1;
max-height: 2.4em;
color: var(--color-surface);
}
}
}
}
.nav-menu-section {
border-top: thin solid var(--color-surfacedark80);
.nav-menu-section {
border-top: thin solid var(--color-surfacedark80);
.nav-menu-option-container {
display: flex;
flex-direction: row;
align-items: center;
height: 4rem;
.nav-menu-option-container {
display: flex;
flex-direction: row;
align-items: center;
height: 4rem;
&:hover {
background-color: var(--color-surfacedarker60);
}
&:hover {
background-color: var(--color-surfacedarker60);
}
.icon {
flex: none;
width: 1.4rem;
height: 1.4rem;
margin: 1.3rem;
fill: var(--color-secondarylight);
}
.icon {
flex: none;
width: 1.4rem;
height: 1.4rem;
margin: 1.3rem;
fill: var(--color-secondarylight);
}
.nav-menu-option-label {
flex: 1;
max-height: 2.4em;
padding-right: 1.3rem;
color: var(--color-surfacelighter);
.nav-menu-option-label {
flex: 1;
max-height: 2.4em;
padding-right: 1.3rem;
color: var(--color-surfacelighter);
&:only-child {
padding-left: 1.3rem;
&:only-child {
padding-left: 1.3rem;
}
}
}
}

1
src/common/NavBar/styles.less
View file

@ -5,6 +5,7 @@
align-items: center;
height: var(--nav-bar-size);
background-color: var(--color-secondarydark);
overflow: visible;
.nav-tab-button {
flex: none;