I have a Navbar that when in mobile mode the icons are covering the menu, as shown in the image

My idea is when clicking on the hamburger hides the icons.

Below is part of the navbar (Navbar.js) code where it uses a change of state to show what is in the hamburger

function Nav() {
  const [isOpen, setIsOpen] = useState(false);
  return (<div className="-mr-2 flex md:hidden">
              <button
                onClick={() => setIsOpen(!isOpen)}
                type="button"
                className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
                aria-controls="mobile-menu"
                aria-expanded="false"
              >
                <span className="sr-only">Open main menu</span>
                {!isOpen ? (
                  <svg
                    className="block h-6 w-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    aria-hidden="true"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M4 6h16M4 12h16M4 18h16"
                    />
                  </svg>
                ) : (
                  <svg
                    className="block h-6 w-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    aria-hidden="true"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M6 18L18 6M6 6l12 12"
                    />
                  </svg>
                )}
              </button>
            </div>

Below is the code where the dots appears, which is to be hidden after clicking on the hamburger

import { useState, useEffect } from "react";
import { AiOutlineArrowLeft, AiOutlineArrowRight } from "react-icons/ai";
import styles from "./Slider.module.scss";
import Dots from './dots'


const Slider = () => {
  const [currentSlide, setCurrentSlide] = useState(0);

  
const initialSlides = [
  {
    description: <p>This is the description of slide one Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi quos quas, voluptatum nesciunt illum exercitationem.</p>,
    Image: "/images/imagem_youtube.png",
    button: <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">botão 1</button>
  },
  
  {
    description: 4,
    Image: '/images/imagem_youtube.png',
    button: <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">botão 4</button>
  },
];

const slideLength = initialSlides.length;

  const autoScroll = true;
  let slideInterval;
  let intervalTime = 5000;

  const nextSlide = () => {
    setCurrentSlide(currentSlide === slideLength - 1 ? 0 : currentSlide   1);
    console.log("next");
  };

  const prevSlide = () => {
    setCurrentSlide(currentSlide === 0 ? slideLength - 1 : currentSlide - 1);
    console.log("prev");
  };

  function auto() {
    slideInterval = setInterval(nextSlide, intervalTime);
  }

  useEffect(() => {
    setCurrentSlide(0);
  }, []);

  useEffect(() => {
    if (autoScroll) {
      auto();
    }
    return () => clearInterval(slideInterval);
  }, [currentSlide]);

  return (
    <div className={styles.slider}>
      <AiOutlineArrowLeft className={styles.arrow_prev} onClick={prevSlide} />
      <AiOutlineArrowRight className={styles.arrow_next} onClick={nextSlide} />
      {initialSlides.map((slide, index) => {
        return (
          <div
            className={index === currentSlide ? "slide_current" : "slide"}
            key={index}
          >
            {index === currentSlide && (
              <div>
                <img src={slide.Image} alt="slide" className={styles.image} />
                <div className={styles.content}>
                  <p>{slide.description}</p>
                  <hr />
                  <p>{slide.button}</p>
                </div>
               <Dots
                  currentSlide={currentSlide}
                  initialSlides={initialSlides}
                  onclick={(currentSlide) => setCurrentSlide(currentSlide)}
                />
              </div>
            )}
          </div>
          
        );
      })}
        

    </div>
  );
};

export default Slider;

I think use this in Dots

{
 Show && (<div><div/>)
}

but i don't know how to do the rest

CodePudding user response：

While having if else statement, you should use ? instead of &&

Usage would be < if something > ? < while true > : < else >

e.g. Show ? (Content1) : (Content2)

CodePudding user response：

It's my understanding that Slider is a subcomponent of your Hamburger menu, and Dots is a subcomponent of Slider. Is this correct?

You'll need a piece of state to keep track of whether the dots are on the screen or not in your Hamburger Menu component:

const [showDots, setShowDots] = useState(true) // Default to true, dots show until menu clicked

Then add a click handler to the Hamburger Menu component to set the value to false. something like:

onClick={() => setShowDots(!showDots)}

Then you would pass showDots as a prop to Slider:

<Slider showDots={showDots} ... />

And then use this prop within the Slider component:

{showDots && <Dots
                  currentSlide={currentSlide}
                  initialSlides={initialSlides}
                  onclick={(currentSlide) => setCurrentSlide(currentSlide)}
                />