Responsive and functional E-commerce page

@AhmadYousif89 Thank you for your feedback!

Fixed those issues. It led me to learn how to create React custom hooks so I could repeat the "click outside element" logic on the cart popup, the gallery modal and the burger menu. Learned a lot.

Thanks again!

@g-pg

I still can interact with the elements underneath the backdrop 😐

You're right! I only included logic to close the modal when the user clicks outside. Since this modal is not a warning or something similar, maybe it isn't a problem to let the user interact with the cart button, for instance, as long as the modal is not visible anymore.

Appreciate your attention very much, @AhmadYousif89.

@g-pg

I mean for such a dummy/training application yes it doesn't matter that much but imagine you delivering this work to a real customer or your boss at your company instructed you to build a real gallery with a production level lightbox that will serve actual users then it will be a big problem, it's not just a UI/UX issue but it's also bad in term of developer point of view, I mean like if I was to hire a dev for example I would be looking for the one that care about the code quality and also deliver good user experience and care about that little details (of course I'm not taking about you personally).

@AhmadYousif89

To be honest, I usually see modals that behave the way mine does, ie, it closes when the user clicks outside of it. If my client or boss specifically asks for a modal that only closes when the close button is clicked, of course I will code it to behave that way. I don't think there is a correct and a wrong way to adress this. If there is, I sincerely want to know!

@g-pg

I was talking about the backdrop issue (the z-index issue) not the closing behavior of it, of course this is the correct behavior or let's say the expected behavior for closing the backdrop

@AhmadYousif89 Sorry, I'm not sure if I follow.

The modal is the highest z-index element, is it not? Before, you were right, the cart could show up in front of the modal. Now, when I open it, the cart popup automatically closes. The only thing I kept was the possibility to click on the cart button with the modal opened. But when I do the modal closes. I didn't completely disable outside clicks.

You're saying the way I implemented these fixes is wrong or these fixes are not showing for you?

@g-pg

Now closing the cart with clicking outside the cart modal is awesome, but that doesn't fix the main issue with the backdrop overlay when the lightbox is open or the side menu is open, again the issue is that I can interact with the underneath elements while the backdrop overlay is open and that is not a good experience nor correct behavior, because the backdrop overlay should be covering the entire screen and making the user focus and interact only with what's inside/above that overlay.

I hope that made sense 🙂

@AhmadYousif89

Fixed it!

@g-pg

Looks awesome 👍

@sulemaan7070

Hey, thanks for your feedback! I fixed those issues.

@0xAbdulKhalid

Thanks for your feedback! Fixed almost all of them, but I'm still getting a warning to ensure "landmarks are unique". It points to the <nav> element.

I used a <nav> tag to wrap the main nav and another <nav> to wrap the cart and profile buttons, since they serve distinct purposes. Is it wrong?

Thanks!