Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-08-19 18:48:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Popup integrated in NavMenu

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-08-10 08:14:48 +03:00
parent 33fcda7f0c
commit 75e3686e24
2 changed files with 92 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,16 +4,11 @@ const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const Button = require('../../Button');
const Popup = require('../../Popup');
const useBinaryState = require('../../useBinaryState');
const styles = require('./styles');
const NavMenu = ({ className, email = '', avatar = '', logout }) => {
const [active, setActive] = React.useState(false);
const onPopupOpen = React.useCallback(() => {
setActive(true);
}, []);
const onPopupClose = React.useCallback(() => {
setActive(false);
}, []);
const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
const [fullscreen, setFullscreen] = React.useState(document.fullscreenElement instanceof HTMLElement);
const toggleFullscreen = React.useCallback(() => {
if (fullscreen) {
@ -32,14 +27,22 @@ const NavMenu = ({ className, email = '', avatar = '', logout }) => {
};
}, []);
return (
<Popup onOpen={onPopupOpen} onClose={onPopupClose}>
<Popup.Label>
<Button className={classnames(className, styles['nav-menu-button'], { 'active': active })} tabIndex={-1}>
<Popup
open={menuOpen}
onCloseRequest={closeMenu}
renderLabel={({ ref, onClick }) => (
<Button ref={ref}
className={classnames(className, styles['nav-menu-button'], { 'active': menuOpen })}
tabIndex={-1}
onClick={(event) => {
onClick(event);
toggleMenu();
}}>
<Icon className={styles['icon']} icon={'ic_more'} />
</Button>
</Popup.Label>
<Popup.Menu className={styles['nav-menu-container']}>
<div className={styles['nav-menu']}>
)}
renderMenu={({ ref, className, onClick }) => (
<div ref={ref} className={classnames(className, styles['nav-menu'])} onClick={onClick}>
<div className={styles['user-info']}>
<div
className={styles['avatar']}
@ -94,8 +97,8 @@ const NavMenu = ({ className, email = '', avatar = '', logout }) => {
</Button>
</div>
</div>
</Popup.Menu>
</Popup>
)}
/>
);
};

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

@ -20,97 +20,93 @@
}
}
.nav-menu-container {
--box-shadow: -0.6rem .6rem .5rem -0.1rem var(--color-backgrounddark40);
.nav-menu {
width: 20rem;
background-color: var(--color-background);
.nav-menu {
width: 20rem;
background-color: var(--color-background);
.user-info {
display: grid;
height: 6rem;
grid-template-columns: 6rem 1fr;
grid-template-rows: 50% 50%;
grid-template-areas:
"avatar-area email-area"
"avatar-area login-logout-button-area";
.user-info {
display: grid;
height: 6rem;
grid-template-columns: 6rem 1fr;
grid-template-rows: 50% 50%;
grid-template-areas:
"avatar-area email-area"
"avatar-area login-logout-button-area";
.avatar {
grid-area: avatar-area;
padding: 0.8rem;
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-origin: content-box;
background-clip: content-box;
}
.avatar {
grid-area: avatar-area;
padding: 0.8rem;
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: 0.6rem 0.6rem 0 0;
color: var(--color-surfacelighter);
}
.email-container {
grid-area: email-area;
display: flex;
flex-direction: row;
align-items: center;
padding: 0.6rem 0.6rem 0 0;
.login-logout-button {
grid-area: login-logout-button-area;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 0.6rem 0.6rem 0;
color: var(--color-surface);
cursor: pointer;
&:hover {
color: var(--color-surfacelighter);
}
.login-logout-button {
grid-area: login-logout-button-area;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 0.6rem 0.6rem 0;
color: var(--color-surface);
cursor: pointer;
&:hover {
color: var(--color-surfacelighter);
text-decoration: underline;
}
}
.email-container, .login-logout-button {
.user-info-label {
flex: 1;
max-height: 2.4em;
}
text-decoration: underline;
}
}
.nav-menu-section {
border-top: calc(0.5 * var(--focusable-border-size)) solid var(--color-surfacedark80);
.email-container, .login-logout-button {
.user-info-label {
flex: 1;
max-height: 2.4em;
}
}
}
.option {
display: flex;
flex-direction: row;
align-items: center;
.nav-menu-section {
border-top: calc(0.5 * var(--focusable-border-size)) solid var(--color-surfacedark80);
.option {
display: flex;
flex-direction: row;
align-items: center;
height: 4rem;
cursor: pointer;
&:hover {
background-color: var(--color-surfacedarker60);
}
.option-icon {
flex: none;
width: 4rem;
height: 4rem;
cursor: pointer;
padding: 1.3rem;
fill: var(--color-secondarylight);
&:hover {
background-color: var(--color-surfacedarker60);
&+.option-label {
padding-left: 0;
}
}
.option-icon {
flex: none;
width: 4rem;
height: 4rem;
padding: 1.3rem;
fill: var(--color-secondarylight);
&+.option-label {
padding-left: 0;
}
}
.option-label {
flex: 1;
max-height: 2.4em;
padding: 0 1.3rem;
color: var(--color-surfacelighter);
}
.option-label {
flex: 1;
max-height: 2.4em;
padding: 0 1.3rem;
color: var(--color-surfacelighter);
}
}
}