Added animation in shop menu along with some minor changes

[Sushil010]

Pull Request

Description

• The shop menu opens and closes smoothly; any navbar shift is due to the main page scroll bar adjusting.
• Background scrolling is stopped
• Dynamic navigation added for each product/collection using encoded titles
• All Products header is now a link and a scroll to top button is added

Checklist

• My code builds and runs locally
• I’ve added/updated documentation if needed
• I’ve tested my changes
• I’ve linked related issues (if any)
• (Optional) I’ve credited myself with the All Contributors bot if this is my first contribution or a new contribution type

[Alexandrbig1]

Thank you for your contribution, and congrats on your PR being approved!
We’re excited to have your work as part of Open Code Chicago’s Hacktoberfest 2025 project.

[Alexandrbig1]

@Sushil010, please pull the latest changes, test your implementation locally, and run npm run lint before merging — there are a few lint errors to fix.

[Alexandrbig1]

@Sushil010, and also check your PR commit, it closes an unrelated issue.

[Sushil010]

@Alexandrbig1 Apologies for the confusion. I was actually working on both of those issues simultaneously, which may have caused the problem. I’ll make sure to address it properly moving forward.

[Sushil010]

@Alexandrbig1 can you check on the new changes

[Alexandrbig1]

Thank you for your contribution, and congrats on your PR being approved!
We’re excited to have your work as part of Open Code Chicago’s Hacktoberfest 2025 project.

[Alexandrbig1]

@Sushil010, great work, a few improvements could be made:

• Use react-router-dom for internal navigation
  • Replace plain links/window.open for in-app routes with Link or useNavigate.
• Fix click-outside detection
  • Add a ref for the mega menu (menuRef) and check both refs in the handler: if (!shopButtonRef.current.contains(e.target) && !menuRef.current?.contains(e.target) && shopOpen) handleCloseMenu(); Currently, if the user clicks onthe menu but not on a link, he closes the menu.
• Preserve and restore body overflow
  • Save the previous value (useRef) before setting document.body.style.overflow = 'hidden', and restore that exact value on cleanup instead of setting '' (prevents interfering with other components).
• inert attribute accessibility
  • Good intent, but not supported everywhere. Add the WICG inert polyfill or provide a fallback (aria-hidden + keyboard focus trap) so keyboard/screen-reader behavior is consistent across browsers.
• Clear animation timeouts on unmount
  • Store timeout IDs in refs (openTimeoutRef, closeTimeoutRef). Clear them when starting new timeouts and in effect cleanup to avoid setState on unmounted components.

Thanks, and waiting for the new PR.

[Alexandrbig1]

Hi @Sushil010, working on it?

[Sushil010]

@Alexandrbig1 Yes, I'm on it. I’ll need a bit of time to complete it and will share updates along the way. It may require some review, so please don’t feel troubled while reviewing😁😁

[Alexandrbig1]

@Sushil010, no worries, thanks for the updates!

[Alexandrbig1]

Hi @Sushil010, any updates?

[Alexandrbig1]

🎨 UI Builder 2025 Badge Earned! 🏅

Congratulations, and thank you for your awesome frontend contributions to CoreX during Hacktoberfest 2025!
Your attention to design detail, UI structure, and collaboration truly reflect what open-source craftsmanship looks like.

You’ve officially earned the Open Code Chicago × CoreX — UI Builder 2025 badge 🎖
👉 Claim your badge here: Claim Badge

Keep building beautiful interfaces! 💻✨
— Open Code Chicago Team