React Hooks - нажатие на ссылку Sidenav либо закроет sidenav, либо go для указанной ссылки, но не оба сразу

Question

Я встречал похожие вопросы, но ни один из них не дал ответа с использованием функциональных компонентов / хуков!

Любые мысли о том, как щелкнуть ссылку в боковом меню и закрыть ее, а затем go перейти к ссылка на сайт? Я думал добавить мой «onClick = {closehandler}» к каждой ссылке в Sidenav, который работает для моего значка закрытия, но это только закрывает sidenav, не переходя на ссылку.

Я знаю, что я ' м близко! просто не могу понять.

Navbar

import React, { Fragment, useState } from 'react';
import { Link } from 'react-router-dom';
import Toggle from './Toggle';
import Sidenav from './Sidenav';


const Navbar = () => {
  const [sidenavOpen, setSidenavOpen] = useState(false);

  const openHandler = () => {
    if (!sidenavOpen) {
      setSidenavOpen(true);
    } else {
      setSidenavOpen(false);
    }
  };

  const sidenavCloseHandler = () => {
    setSidenavOpen(false);
  };

  let sidenav;
  if (sidenavOpen) {
    sidenav = <Sidenav close={sidenavCloseHandler} sidenav={'side-nav'} />;
  }

  return (
    <Fragment>
      <nav id='nav'>
        <div className='nav-wrapper'>
          <div className='mobile-nav-container'>
            <Toggle click={openHandler} />{' '}
            <p className='logo'>
              {' '}
              <img src={bdalogolight} alt='' />{' '}
            </p>
          </div>
          <ul className='hide-on-sm'>
            <li>
              <Link to='/' className='navlink'>
                Locations
              </Link>
            </li>
            <li>
              <Link to='/warranties' className='navlink'>
                Warranties
              </Link>
            </li>
            <li>
              <a
                href='https://www.bdainspectionconcierge.com/'
                target='_blank'
                className='navlink'
                rel='noreferrer noopener'
              >
                Concierge
              </a>
            </li>
            <li>
              <a
                href='https://www.bdainspectionguide.com/'
                target='_blank'
                className='navlink'
                rel='noreferrer noopener'
              >
                Inspection Guide
              </a>
            </li>
            <li style={{ margin: '0 1.4rem' }}>
              {' '}
              <img src={pipecharacter} alt='' className='pipe-character' />{' '}
            </li>

            <li>
              <a href='http://www.facebook.com' className='navlink social-link'>
                {' '}
                <i className='fab fa-facebook'></i>{' '}
              </a>
            </li>
            <li>
              <a
                href='http://www.instagram.com'
                className='navlink social-link'
              >
                {' '}
                <i className='fab fa-instagram'></i>{' '}
              </a>
            </li>
            <li>
              <a href='http://www.twitter.com' className='navlink social-link'>
                {' '}
                <i className='fab fa-twitter'></i>{' '}
              </a>
            </li>
          </ul>
        </div>
      </nav>

      {sidenav}
    </Fragment>
  );
};

export default Navbar;

Sidenav

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import sidenavvector from '../../img/vectors/side-nav-vector.svg';

const Sidenav = (props) => {
  const [sidenavClass, setSidenavClass] = useState(props.sidenav);

  const closeHandler = (e) => {
    e.preventDefault();
    setSidenavClass('side-nav close');
    setTimeout(() => {
      props.close();
    }, 500);
  };
  return (
    <div>
      <div id='side-menu' className={sidenavClass}>
        <a href='#!' onClick={closeHandler} className='btn-close'>
          <i className='fas fa-times'></i>{' '}
        </a>
        <div className='side-nav-body'>
          <div className='container'>
            <div>
              <Link to='/' onClick={closeHandler} className='navlink-secondary'>
                {' '}
                Locations
              </Link>
            </div>
            <Link to='/warranties' className='navlink-secondary'>
              {' '}
              Warranties
            </Link>
            <a
              href='https://www.website.com/'
              className='navlink-secondary'
            >
              {' '}
              Concierge
            </a>
            <a
              href='https://www.website.com/'
              className='navlink-secondary'
            >
              {' '}
              Inspection Guide
            </a>
            <div className='container nav-call-to-action'>
              <a
                href='https://goisn.net/bdainspections/online-scheduler?t=eXF0RXRyOGRFbUxjTQ=='
                target='_blank'
                rel='noreferrer noopener'
                className='btn btn-primary'
              >
                Book an Inspection
              </a>
              <a href='tel:777-777-7777' className='btn btn-light'>
                Call Us
              </a>
            </div>
          </div>
        </div>
        <div className='side-nav-footer'>
          <div className='container'>
            <img src={sidenavvector} alt='' />
            <br />
            <br />
          </div>
          <p>"Better Days Ahead"</p>
        </div>
      </div>
    </div>
  );
};

export default Sidenav;

Toggle

import React, { Fragment } from 'react';
import mobilenavopen from '../../img/brand/mobile-nav-open.svg';

const Toggle = (props) => {
  return (
    <Fragment>
      <span className='open-slide'>
        <a href='#!' className='hide-on-lg' onClick={props.click}>
          <img src={mobilenavopen} alt='' />
        </a>
      </span>
    </Fragment>
  );
};

export default Toggle;