Trying to implement a mobile menu display and hide on screen resize using a react component an external style file and tailwind to close a mobile nave when a button is clicked In the process of trying to implement a react and tailwind version of the nav menu in the below github link which was done using tailwind and CSS

https://github.com/bradtraversy/tailwind-course-projects/blob/main/website-projects/shortly/js/script.js

The webpage looks something like the below URL

https://tailwindfromscratch.com/website-projects/shortly/index.html Basically by trying to implement a react version of the function "navToggle" Please advise me on how I can toggle the class state by using the Boolean state value. If true, to add the class name to the className property in the component file or changes to make in the class file or both Thanks

Here's my code below

Main component

import React, {useState} from 'react';
import mainLogo from '../../../public/assets/images/logo.png';
import {NavLink} from "@remix-run/react";

const Header = () => {
   const [menuIsOpen, setMenuIsOpen] = useState("false");

// Toggle Mobile Menu
   const navToggle= () => {
      setMenuIsOpen(!menuIsOpen);
   };
   return (
      <>
         {/*Nav Container*/}
         <nav className="relative container mx-auto p-6">
            {/*Flex Container For All Items*/}
            <div className="flex items-center justify-between">
               {/*Flex Container For Logo/Menu*/}
               <div className="flex items-center space-x-20">
                  {/*Logo*/}
               <NavLink className='d-lg-none'  to='/'>
                  <img src={mainLogo} alt='Logo' />
               </NavLink>
                  {/*Left Menu*/}
                  <div className="hidden space-x-8 font-bold lg:flex">
                     <NavLink to='/' className="text-grayishViolet hover:text-veryDarkViolet">
                        Home
                     </NavLink>
                     <NavLink to='/about' className="text-grayishViolet hover:text-veryDarkViolet">
                        About
                     </NavLink>
                     <NavLink to='/services' className="text-grayishViolet hover:text-veryDarkViolet">
                        Products &amp; Businesses
                     </NavLink>
                     <NavLink to='/contacts' className="text-grayishViolet hover:text-veryDarkViolet">
                        Contact us
                     </NavLink>
                  </div>
               </div>

               {/*Right Buttons Menu*/}
               <div
                   className="hidden items-center space-x-6 font-bold text-grayishViolet lg:flex"
               >
               <div className='header-mail d-xl-block d-none'>
                  Email: [email protected]
               </div>
               </div>

               {/*Hamburger Button*/}
               <button
                   onClick={navToggle}
                   name="menu-btn"
                   id="menu-btn"
                   className="block hamburger lg:hidden focus:outline-none"
                   type="button"
               >
                  <span className="hamburger-top"></span>
                  <span className="hamburger-middle"></span>
                  <span className="hamburger-bottom"></span>
               </button>
            </div>

            {/*Mobile Menu*/}
            <div
                id="menu"
                className="absolute hidden p-6 rounded-lg bg-darkViolet left-6 right-6 top-20 z-100"
            >
               <div
                   className="flex flex-col items-center justify-center w-full space-y-6 font-bold text-white rounded-sm"
               >
                  <NavLink to='/'  className="w-full text-center">Home</NavLink>
                  <NavLink to='/about'  className="w-full text-center">About</NavLink>
                  <NavLink to='/services'  className="w-full text-center">Services</NavLink>
                  <NavLink to='/contacts'  className="w-full text-center">Contact us</NavLink>
               </div>
            </div>
         </nav>
      </>
   );
};

export default Header;

Style file

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}


.hamburger {
  cursor: pointer;
  width: 24px;
  height: 24px;
  transition: all 0.25s;
  position: relative;
}

.hamburger-top,
.hamburger-middle,
.hamburger-bottom {
  content: '';
  position: absolute;
  width: 24px;
  height: 3px;
  top: 0;
  left: 0;
  background: #9c9aa6;
  transform: rotate(0);
  transition: all 0.5s;
}

.hamburger-middle {
  transform: translateY(7px);
}

.hamburger-bottom {
  transform: translateY(14px);
}

.open {
  transform: rotate(90deg);
  transform: translateY(0px);
}

.open .hamburger-top {
  transform: rotate(45deg) translateY(6px) translateX(6px);
}

.open .hamburger-middle {
  display: none;
}

.open .hamburger-bottom {
  transform: rotate(-45deg) translateY(6px) translateX(-6px);
}

CodePudding user response：

remove the hidden class from the menu div and use the menuIsOpen as a condition to display the menu

{/*Mobile Menu*/}

{ menuIsOpen && (
<div
    id="menu"
    className="absolute p-6 rounded-lg bg-darkViolet left-6 right-6 top-20 z-100"
>
   <div
       className="flex flex-col items-center justify-center w-full space-y-6 font-bold text-white rounded-sm"
   >
      <NavLink to='/'  className="w-full text-center">Home</NavLink>
      <NavLink to='/about'  className="w-full text-center">About</NavLink>
      <NavLink to='/services'  className="w-full text-center">Services</NavLink>
      <NavLink to='/contacts'  className="w-full text-center">Contact us</NavLink>
   </div>
</div>
 )
}