Bookmark landing page using Astro 🚀 and React

Community feedback

• Account deleted

  There is a tiny bug on this page. When open toggle menu and increase the width of the page (turning back to desktop sizes) mobil menu leaves open and close button disappear so user stuck with mobil nav menu. Accept that you have got great job for this page. Happy coding : )

  Marked as helpful

  1

  ---

  

  Eugenia•950

  @JaneMorozPosted almost 2 years ago

  @GorkemEldeniz Thank you! I'll fix it ☺️ Happy coding to you too 😀

  1
• 

  Fazza Razaq Amiarso•2,340

  @fazzaamiarsoPosted almost 2 years ago

  Hi Eugenia! Nice Work!

  I have a tip for you.

  I saw that you fully use react for your header component. You can improve it further by only react-ify (sorry don't know the word) the Menu.

  You just need to turn this section into react and move the navIsOpen state into the component.

  {!navIsOpen && (
              <button
                aria-label="navigation toggle"
                className="header__mobile-btn btn btn--hamburger"
                type="button"
                onClick={() => setNavIsOpen(!navIsOpen)}
              >
                <HamburgerIcon />
              </button>
            )}
            {navIsOpen && (
              <MobileNav setNavIsOpen={setNavIsOpen} navIsOpen={navIsOpen} />
            )}
  

  So your Header/index.tsx becomes Header/index.astro.

  ---
  // Header logics
  ---
  <header>
  // header codes
  <Menu client:load />
  </header>
  

  I hope it helps! Cheers!

  Marked as helpful

  1

  ---

  

  Eugenia•950

  @JaneMorozPosted almost 2 years ago

  @fazzaamiarso Thank u! I'll definitely look it to it)

  0