Project Tracking Main, first Mobile using React with Vite

Community feedback

• 

  Tee•190

  @thulanigamteePosted almost 2 years ago

  To fix the functionality for the mobile menu, remove;

  const mobileContainer = document.querySelector(".mobileContainer")
      const [visible, setVisible] = useState(false)
      const mostrar = () =>{
          if(visible == false){
              mobileContainer.style.visibility = "visible"
              setVisible(visible = true)
          }else{
              mobileContainer.style.visibility = "hidden"
              setVisible(visible = false)
          }
      }
  

  I don't think you need that, replace it with this;

  const mostrar = () => {
      document.querySelector(".mobileContainer").classList.toggle("active");
    }
  

  Then on your css, I removed visibility, and used display:none, then toggled it, like this;

  .mobileContainer {
    display: none;
  }
  
  .mobileContainer.active {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    min-height: 40vh;
    width: 80%;
    margin-left: 10%;
    position: fixed;
    background-color: white;
    box-shadow: 0 0 20px -5px black;
    border-radius: 5px;
  }
  

  That seemed to do the trick, and I am not sure what mostrar is, when naming your functions or anything for that matter try using descriptive words, rather than mostrar, something like toggleMobileMenu for the function would have been way better, because that is what it does, it toggles the mobile menu.

  Marked as helpful

  0

  ---

  

  Diego Pasaye•570

  @DiegoPasayePosted almost 2 years ago

  @thulanigamtee Thank you, i can fix this with your solution, i put the class mostrar because i speak spanish and it is show in english, but is an error, im trying to name the variables in english, thanks!

  1