0

I have a problem with react-router-dom.

I had the same menu for mobile and desktop

https://i.stack.imgur.com/l9lTZ.png

In mobile mode I can handle the menu close and open with state but in desktop mode. I want to close the hovered menu after user click on <Link /> component.

import React from 'react';
import {NavLink} from 'react-router-dom';

class Item extends React.Component {
    render() {
        return <li>
            <NavLink replace to={'/categories/' + this.props.slug}>{this.props.name}</NavLink>
            { this.props.children }
        </li>
    }
}

class MainNav extends React.Component {

    list = (data) => {
        const children = (items) => {
            if (items && items.length) {
                return <ul>{ this.list(items) }</ul>
            }
        }
        return data.map((node, index) => {
            return <Item key={ node.id } slug={node.slug} name={ node.name }>
                { children(node.children) }
            </Item>
        });
    }

    render() {
        return <ul className="nav">
            { this.list(this.props.categories) }
        </ul>

    }
}

export default MainNav;

Assume that I just want to fix for desktop version only. How to do that!

Thank you

JayK
  • 141
  • 9

1 Answers1

0

Checking if the device is mobile or desktop is not trivial, but you could add this to property to Link element:

onClick={ window.orientation > -1 ? null : YourCloseMenuSetter }

This will do nothing null if the device is a mobile on (has orientation). If it is not a mobile device it will run the function that closes the menu, so called YourCloseMenuSetter.

yuri
  • 3,182
  • 2
  • 16
  • 26
  • Thank yuri! you do not understand my question. I mean I cannot close the menu on desktop when clicking on menu item because It is handled by css hover property. – JayK Dec 27 '19 at 16:57