Using a toggle instead of a hover (for mobile), and autoclose
This commit is contained in:
Unknown committed
1 parent
3fac79cc0a
commit
f6280e53ba
4 files changed
+130
-67
No files matched your search
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'
|
||||
import { isDefined } from '../../../utils/js-helpers'
|
||||
|
||||
export const LoggedIn = props => {
|
||||
let { user, auth } = props
|
||||
let { user, auth, openedMenu, toggleMenuOpen, closeAll } = props
|
||||
let displayName = 'No Display Name'
|
||||
|
||||
if (isDefined(user.alias)) {
|
||||
@@ -25,10 +25,10 @@ export const LoggedIn = props => {
|
||||
|
||||
return (
|
||||
|
||||
<li className='primaryLink hasChildren'>
|
||||
<Link to='/users/user'> {displayName} </Link>
|
||||
<li className={openedMenu === 42 ? 'selected primaryLink hasChildren' : 'primaryLink hasChildren'}>
|
||||
<Link to='/users/user' onClick={() => toggleMenuOpen(42)}> {displayName} </Link>
|
||||
<ul className='subMenu'>
|
||||
<li><Link to='/users/user' > Profile </Link></li>
|
||||
<li><Link to='/users/user' onClick={() => closeAll()}> Profile </Link></li>
|
||||
<li><a href='#' onClick={() => auth.logout()}> Logout </a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
|
||||
const usersMenus = {
|
||||
title: 'Users',
|
||||
to: '/events',
|
||||
to: '/users',
|
||||
submenus: [
|
||||
{ title: 'Your profile', to: '/users/user', icon: Search },
|
||||
{ title: 'Directory', to: '/users/browse', icon: GamepadRounded },
|
||||
@@ -42,7 +42,7 @@ const eventsMenus = {
|
||||
|
||||
const keyvaultMenus = {
|
||||
title: 'Key Vault',
|
||||
to: '/events',
|
||||
to: '/key-vault',
|
||||
submenus: [
|
||||
{ title: 'Manage keys', to: '/key-vault/browse', icon: Search },
|
||||
{ title: 'Add key', to: '/key-vault/addKey', icon: GamepadRounded },
|
||||
|
||||
@@ -21,6 +21,7 @@ class Header extends Component {
|
||||
this.state = {
|
||||
onTop: true,
|
||||
mobileOpen: false,
|
||||
openedMenu: null,
|
||||
user: null
|
||||
}
|
||||
}
|
||||
@@ -37,6 +38,18 @@ class Header extends Component {
|
||||
this.setState({ mobileOpen: !this.state.mobileOpen })
|
||||
}
|
||||
|
||||
toggleMenuOpen (index) {
|
||||
if (this.state.openedMenu === index) {
|
||||
this.setState({ openedMenu: null })
|
||||
} else {
|
||||
this.setState({ openedMenu: index })
|
||||
}
|
||||
}
|
||||
|
||||
closeAll () {
|
||||
this.setState({ openedMenu: null, mobileOpen: false })
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
window.addEventListener('scroll', () => this.handleScroll())
|
||||
const user = window.localStorage.getItem('user')
|
||||
@@ -49,8 +62,7 @@ class Header extends Component {
|
||||
|
||||
render () {
|
||||
let { auth } = this.props
|
||||
let { onTop, mobileOpen } = this.state
|
||||
|
||||
let { onTop, mobileOpen, openedMenu } = this.state
|
||||
if (window.localStorage.getItem('access_token')) {
|
||||
if (jwtDecode(window.localStorage.getItem('access_token')).exp < new Date().getTime() / 1000) {
|
||||
window.localStorage.clear()
|
||||
@@ -61,13 +73,13 @@ class Header extends Component {
|
||||
|
||||
const menus = allMenus.map(({ to, title, submenus }, index) => {
|
||||
return (
|
||||
<li key={index} className='primaryLink hasChildren'>
|
||||
<Link to={to}> {title} </Link>
|
||||
<li key={index} className={openedMenu === index ? 'primaryLink hasChildren selected' : 'primaryLink hasChildren'}>
|
||||
<Link to={to} onClick={() => this.toggleMenuOpen(index)}> {title} </Link>
|
||||
<ul className='subMenu'>
|
||||
{
|
||||
submenus.map(({ icon: Icon, to: subTo, title: subTitle }, subindex) => {
|
||||
return (
|
||||
<li key={subindex}><Link to={subTo}> <Icon /> {subTitle} </Link></li>
|
||||
<li key={subindex}><Link to={subTo} onClick={() => this.closeAll(index)}> <Icon /> {subTitle} </Link></li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
@@ -82,7 +94,7 @@ class Header extends Component {
|
||||
<div className={mobileOpen ? 'mobileHandle openedMobile' : 'mobileHandle'} onClick={() => this.toggleMobileOpen()}>
|
||||
Menu
|
||||
</div>
|
||||
<nav className='links'>
|
||||
<nav className={mobileOpen ? 'links openedMobile' : 'links'}>
|
||||
<ul className='primaryMenu'>
|
||||
<li className='primaryLink'>
|
||||
<Link to='/'> Charts </Link>
|
||||
@@ -92,7 +104,13 @@ class Header extends Component {
|
||||
<a href='https://www.advancedalgos.net/documentation-quick-start.shtml'> Docs </a>
|
||||
</li>
|
||||
{this.state.user !== undefined && this.state.user !== null ? (
|
||||
<LoggedIn user={user} auth={auth} />
|
||||
<LoggedIn
|
||||
user={user}
|
||||
auth={auth}
|
||||
openedMenu={openedMenu}
|
||||
toggleMenuOpen={(keyValue) => this.toggleMenuOpen(keyValue)}
|
||||
closeAll={() => this.closeAll()}
|
||||
/>
|
||||
) : (
|
||||
|
||||
<li className='primaryLink'>
|
||||
|
||||
@@ -57,10 +57,12 @@ header.menu{
|
||||
margin-bottom: ( $height-not-top - $mobile-handle-height ) / 2 ;
|
||||
}
|
||||
nav.links{
|
||||
ul.primaryMenu{
|
||||
li.primaryLink{
|
||||
padding-top: ( $height-not-top - $text-height ) / 2;
|
||||
padding-bottom: ( $height-not-top - $text-height ) / 2;
|
||||
@media screen and (min-width: $break-big) {
|
||||
ul.primaryMenu{
|
||||
li.primaryLink{
|
||||
padding-top: ( $height-not-top - $text-height ) / 2;
|
||||
padding-bottom: ( $height-not-top - $text-height ) / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -98,7 +100,7 @@ header.menu{
|
||||
margin-top: ( $height-large-device - $image-height-big ) / 2 ;
|
||||
height: $image-height-big;
|
||||
}
|
||||
.openedMobile{
|
||||
.mobileHandle.openedMobile{
|
||||
&:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -158,61 +160,104 @@ header.menu{
|
||||
nav.links{
|
||||
@media screen and (max-width: $break-big) {
|
||||
display: none;
|
||||
&.mobileShow{
|
||||
&.openedMobile{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
float: right;
|
||||
ul.primaryMenu{
|
||||
margin: 0 4px 0 0;
|
||||
list-style: none;
|
||||
|
||||
font-family: 'Saira';
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: $text-height;
|
||||
text-transform: uppercase;
|
||||
li.primaryLink{
|
||||
transition: $transition-time;
|
||||
display: block;
|
||||
float: left;
|
||||
position: relative;
|
||||
padding-top: ( $height-large-device - $text-height ) / 2;
|
||||
padding-bottom: ( $height-large-device - $text-height ) / 2;
|
||||
padding-right: 21px;
|
||||
padding-left: 21px;
|
||||
a{
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
&:hover{
|
||||
color: $advanced-algos-red;
|
||||
}
|
||||
}
|
||||
ul.subMenu{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
|
||||
padding: 18px 30px;
|
||||
list-style: none;
|
||||
font-family: 'Saira';
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
line-height: $text-height;
|
||||
|
||||
ul.primaryMenu{
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
font-family: 'Saira';
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: $text-height;
|
||||
text-transform: uppercase;
|
||||
list-style: none;
|
||||
li.primaryLink{
|
||||
min-width: 240px;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
li{
|
||||
height: 30px;
|
||||
min-height: 50px;
|
||||
border-bottom: 1px solid white;
|
||||
&:last-child{
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
&>a{
|
||||
color: $advanced-algos-red;
|
||||
a{
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
padding: 0 40px 0 30px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
ul.subMenu{
|
||||
display: block;
|
||||
display: none;
|
||||
list-style: none;
|
||||
}
|
||||
&.selected{
|
||||
ul.subMenu{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: $break-big) {
|
||||
display: block;
|
||||
float: right;
|
||||
ul.primaryMenu{
|
||||
margin: 0 4px 0 0;
|
||||
list-style: none;
|
||||
|
||||
font-family: 'Saira';
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: $text-height;
|
||||
text-transform: uppercase;
|
||||
li.primaryLink{
|
||||
transition: $transition-time;
|
||||
display: block;
|
||||
float: left;
|
||||
position: relative;
|
||||
padding-top: ( $height-large-device - $text-height ) / 2;
|
||||
padding-bottom: ( $height-large-device - $text-height ) / 2;
|
||||
padding-right: 21px;
|
||||
padding-left: 21px;
|
||||
a{
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
&.selected{
|
||||
color: $advanced-algos-red;
|
||||
}
|
||||
}
|
||||
ul.subMenu{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
|
||||
padding: 18px 30px;
|
||||
list-style: none;
|
||||
font-family: 'Saira';
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
line-height: $text-height;
|
||||
|
||||
min-width: 240px;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
li{
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
&.selected{
|
||||
&>a{
|
||||
color: $advanced-algos-red;
|
||||
}
|
||||
ul.subMenu{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user