Making a hovering system for big screens

client/src/views/layout/header/LoggedIn.js

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'
 import { isDefined } from '../../../utils/js-helpers'
 
 export const LoggedIn = props => {
-  let { user, auth, openedMenu, toggleMenuOpen, closeAll } = props
+  let { user, auth, openedMenu, toggleMenuOpen, closeAll, bigScreen, mouseLeave } = props
   let displayName = 'No Display Name'
 
   if (isDefined(user.alias)) {
@@ -25,8 +25,12 @@ export const LoggedIn = props => {
 
   return (
 
-    <li className={openedMenu === 42 ? 'selected primaryLink hasChildren' : 'primaryLink hasChildren'}>
-      <Link to='/users/user' onClick={() => toggleMenuOpen(42)}> {displayName} </Link>
+    <li
+      onMouseEnter={() => toggleMenuOpen(42, bigScreen)}
+      onMouseLeave={() => mouseLeave(bigScreen)}
+      className={openedMenu === 42 ? 'selected primaryLink hasChildren' : 'primaryLink hasChildren'}
+    >
+      <Link to='/users/user' onClick={() => toggleMenuOpen(42, true)}> {displayName} </Link>
       <ul className='subMenu'>
         <li><Link to='/users/user' onClick={() => closeAll()}> Profile </Link></li>
         <li><a href='#' onClick={() => auth.logout()}> Logout </a></li>

client/src/views/layout/header/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'react-router-dom'
 import jwtDecode from 'jwt-decode'
+import withWidth from '@material-ui/core/withWidth'
 
 // icons
 import ExitIcon from '@material-ui/icons/ExitToApp'
@@ -38,11 +39,19 @@ class Header extends Component {
     this.setState({ mobileOpen: !this.state.mobileOpen })
   }
 
-  toggleMenuOpen (index) {
-    if (this.state.openedMenu === index) {
+  toggleMenuOpen (index, allowed) {
+    if (allowed) {
+      if (this.state.openedMenu === index) {
+        this.setState({ openedMenu: null })
+      } else {
+        this.setState({ openedMenu: index })
+      }
+    }
+  }
+
+  mouseLeave (allowed) {
+    if (allowed) {
       this.setState({ openedMenu: null })
-    } else {
-      this.setState({ openedMenu: index })
     }
   }
 
@@ -61,6 +70,7 @@ class Header extends Component {
   }
 
   render () {
+    const bigScreen = (this.props.width === 'lg' || this.props.width === 'xl')
     let { auth } = this.props
     let { onTop, mobileOpen, openedMenu } = this.state
     if (window.localStorage.getItem('access_token')) {
@@ -73,8 +83,13 @@ class Header extends Component {
 
     const menus = allMenus.map(({ to, title, submenus }, index) => {
       return (
-        <li key={index} className={openedMenu === index ? 'primaryLink hasChildren selected' : 'primaryLink hasChildren'}>
-          <Link to={to} onClick={() => this.toggleMenuOpen(index)}> {title} </Link>
+        <li
+          onMouseEnter={() => this.toggleMenuOpen(index, bigScreen)}
+          onMouseLeave={() => this.mouseLeave(bigScreen)}
+          key={index}
+          className={openedMenu === index ? 'primaryLink hasChildren selected' : 'primaryLink hasChildren'}
+        >
+          <Link to={to} onClick={() => this.toggleMenuOpen(index, true)}> {title} </Link>
           <ul className='subMenu'>
             {
               submenus.map(({ icon: Icon, to: subTo, title: subTitle }, subindex) => {
@@ -107,8 +122,10 @@ class Header extends Component {
                 <LoggedIn
                   user={user}
                   auth={auth}
+                  bigScreen={bigScreen}
                   openedMenu={openedMenu}
-                  toggleMenuOpen={(keyValue) => this.toggleMenuOpen(keyValue)}
+                  toggleMenuOpen={(keyValue, allowedValue) => this.toggleMenuOpen(keyValue, allowedValue)}
+                  mouseLeave={(allowedValue) => this.mouseLeave(allowedValue)}
                   closeAll={() => this.closeAll()}
                 />
               ) : (
@@ -132,4 +149,4 @@ Header.propTypes = {
   auth: PropTypes.object.isRequired
 }
 
-export default Header
+export default withWidth()(Header)

client/src/views/layout/header/styles.scss

@@ -19,7 +19,7 @@ body{
   }
 }
 
-$break-big: 1300px;
+$break-big: 1280px;
 $break-middle: 992px;
 $break-small: 768px;
 $break-extra-small: 532px;
@@ -158,7 +158,7 @@ header.menu{
       }
     }
     nav.links{
-      @media screen and (max-width: $break-big) {
+      @media screen and (max-width: $break-big - 1) {
         display: none;
         &.openedMobile{
           display: block;