News homepage

Community feedback

• 

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  Hi!

  To answer your question, in this challenge the menu at mobile sizes is most likely fixed and you can actually make it close itself without using IntersectionObserver API or the useEffect or useRef!

  Before writing the code snippets lemme give you a brief explanation:

  • So in the design, you must've seen an overlay when the menu opens right?(the black background) usually when the menu is open the user shouldn't be able to scroll but if they want to close it and just continue browsing they would most likely tap on the overlay rather than the close icon so the main idea is to close the menu when the user try to tap on other places rather than the menu area which will lead it to close it and they can continue.
  • How are we going to achieve this? First we make an overlay and then we just add an onClick event to it! yup, it's just that easy and we don't even need to make new variables or states or anything because you already have a function for the menu close so we can just set that function on the overlay onClick and it would close the menu!
  • Basic rundown on what would happen: Click on Menu -> Menu opens but this time there's an overlay behind the menu indicating that yes the menu is open -> user tries to click outside of the menu (on the overlay) -> the menu closes

  👨🏻‍💻 Now that we know what we are going to do so let's begin!

  • We need to fix the menu a lil bit before starting to add the overlay. Currently, your menu is absolute We are going to make it fixed in case the user is able to scroll, the menu will still be there and it wouldn't be weird that the menu is left behind when they scroll. So remove the absolute and add fixed instead like this:

    {showMenu && (
          <div className="fixed top-0 bg-offWhite  min-h-screen w-[64%] right-0">
          /// rest of the code
         </div>
  

  I have added top-0 too so that it touches the top of the screen.

  • Now moving on to the overlay, In your Nav.js we are going to add a div before the nav element. This is the overlay I was talking about and this will be rendered only if the showMenu is true so we use the logical AND operator (&&). The file should look something like this after doing this:

    return (
    {showMenu && <div></div>}
      <nav className="classes">
       //rest of the code
     </nav>
  

  • After this, we are going to add some tailwind styles to this:

   {showMenu && <div className="fixed inset-0 bg-black bg-opacity-50"></div>}
  

  The overlay is also fixed if they somehow manage to scroll, we use inset-0 so that the overlay covers the whole screen and we opacify the black background so that it we can see the other stuff beneath it. After adding these make sure to add z-10 or z-[1] (z-index) to your menu div so that when it is open it appears on top of this overlay.

  • Now that we have set up our overlay the only thing left is to add onclick to this overlay. We are going to add the menu function you have already created to the onclick like this:

   {showMenu && <div className="fixed inset-0 bg-black bg-opacity-50" onClick={menuhandler}></div>}
  

  Now when you click outside of the menu the menu should close itself!🕺🏻

  You can check out my solution and preview the site on how this works.

  Whew, I hope this feedback isn't too long to read haha! I hope this works out for you! (Lemme know if you face any troubles)

  Good luck and keep coding!🥂

  Marked as helpful

  1

  ---

  

  Michael Chukwu•360

  @Mike-DavePosted over 1 year ago

  @adityaphasu, I want to express my gratitude for your invaluable feedback and the time you dedicated to providing it. Reading through your insights was not only enjoyable but also incredibly captivating and educational.

  After reviewing your solution to the challenge, it became evident that you excel in what you do. The level of accuracy you achieved in creating a 1:1 copy of the provided design is truly impressive.

  I am genuinely curious to learn from your expertise and would greatly appreciate it if you could share insights on how you precisely matched your code with the design. Your skills are truly remarkable, and there is much I can gain from understanding your process.

  Though I enjoy coding, I sometimes feel that front-end development might not be my strongest suit, as I lack a keen eye for design details. As evident in this project, I overlooked several aspects that you astutely pointed out, and they were all present in the design.

  The code you provided in this feedback was remarkably self-explanatory and concise. It was a valuable lesson for me to realize that achieving the desired outcome doesn't require resorting to useEffect and useRef.

  Once again, I extend my heartfelt thanks for your efforts in helping me become a better programmer. Your guidance and expertise have been invaluable, and I am sincerely grateful for the opportunity to learn from someone as skilled as you.

  1

  

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  @Mike-Dave no worries! I still am learning react and still need to dive a lil bit more into the other hooks, when I saw your solution and your question it reminded me of how I was trying to do the same thing with the menu the first time so it was a little easier to explain the stuff :)

  As for the process it depends honestly but for react I must say you have to analyze the design first and pick out the components from it. For example in this challenge we can see there's a header it can be one component the web3 stuff altogether can be another the news can be one and lastly the numbered ones. This same approach goes for design as well before starting to code analyze it to find out which can be for example headings, sections, articles, etc. That's what I usually do.

  For the design to match I use pixelperfect extension to add an overlay of the design image and develop accordingly, this way I get those paddings to match the design on 1440px haha

  Also don't worry about it too much for now once you start building landing pages and such and get in that react practice It will surely become a habit to do these things (at first I wasn't good either but building projects made me grow a lot more than before). So keep up the hard work!🙂

  Btw if you actually see my solution closely on mobile the menu close icon needs some fixing😆

  Marked as helpful

  1

  

  Michael Chukwu•360

  @Mike-DavePosted over 1 year ago

  @adityaphasu "building projects made me grow a lot more than before", I will be applying this to my current situation. For now I will making my skills stronger before giving pixelperfecta try.

  Yes, dividing the design into components will make one pay a lot of attention to the design thereby making one write the proper code without missing the details of the design.

  Once more thank you for your invaluable time, feedback and encouragement. It really meant a lot to me. Enjoy your weekends and happy coding! 🙃

  1