Mobile-first pixel-perfect solution with GSAP animations and fixed bg

Community feedback

• 

  CyrusKabir•1,885

  @CyrusKabirPosted over 2 years ago

  Hello my dear friend ♥ You did awesome job on this challenge and everything it's clean and readable and I was looking at your navigation bar in mobile and I noticed I can close it even with touching nav body it self so I looked at your isClickedOutside logic and the problem was there actually you don't have #nav element here because of it's child or nav__list position property so event.target.matches("#nav") it's always false then the second one event.target.closest("#hamburger") it's always true why ? because everywhere even nav body it self doesn't have parent with #hamburger id (sorry if my writing it's very bad :( ( ); but here you can change isClickedOutside body to this : event.target.matches('*:not(.nav__list)') && !event.target.closest('#hamburger') (I test it but you can test it too and have some discuss about it); edit : and yes of course if we click on the nav__link, again navigation get closed we can write anoter matches with && something like (event.target.matches("*:not(.nav__link)")) but it's a little messy and I am sure with right selector we can have cleaner code

  Marked as helpful

  2

  ---

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @CyrusKabir Hey :)

  Thank you so much for your testing and especially for your time.

  When I was testing this menu, for whatever reason I haven't tested whether menu closes when I click on it. Now I changed the logic of this function, so that every click outside of menu or clicking on links or Contact me button closes the navigation menu. I used more simple approach, by just checking if classList of target does not contain nav__list and if ID of target is not a hamburger. This also makes it, so clicking inside menu, but not onto links or button doesn't close it, but if it is clicked on a link or button - menu closes. I think now everything works as it should.

  1

  

  CyrusKabir•1,885

  @CyrusKabirPosted over 2 years ago

  @GrzywN that's great, I am glad it was helpful and I learned a lot too ♥ edit: but I think we have a new problem :( This time the menu does not open at all, and I think it's because of two times toggleMenu() invocation and this make isMenuExpanded stay false

  0

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @CyrusKabir Well, it works on Firefox, but of course it doesn't on Chrome... I'll try to fix it later

  1

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @CyrusKabir I think it works now, I removed the hamburger event listener and used event delegation to handle clicks.

  0

  

  CyrusKabir•1,885

  @CyrusKabirPosted over 2 years ago

  @GrzywN Yes right now the code is much cleaner but the problem is still not solved, and I think it's because of span.haburger-bar if you log event target when clicking ham icon you can findout why it's not getting open but if we click or better saying touch an close empty space to ham icon above menu gets open. that closest dom property was fine I think 😄 but I like this discuss about such problems, thank you

  1