fix: Navbar dropdown not opening on (iPad Mini ,iPad Air,iPad Pro) responsive viewport

[Surajiitmjnu]

Related Tickets

Fixes: #3755

Description

This PR fixes dropdown interaction on touch devices (tablet/iPad) where menus relied only on hover and didn’t open properly.
Now the dropdown toggles on click for non-hover devices while keeping desktop behavior unchanged.

Changes

• Added click toggle for touch devices
• Ensured only one dropdown opens at a time
• Prevented unwanted navigation when toggling

Type of Change

• Bug fix
• UI improvement

Testing

• Tested on desktop (hover works)
• Tested on tablet/mobile viewport (click toggle works)
• No build errors

Demo video

keploy_ss.mp4

Checklist

• Self reviewed
• Build runs successfully
• Tested on multiple screen sizes

[Surajiitmjnu]

Hi @amaan-bhati sir
please review this change and please let me know any further change is required ?

[dhananjay6561]

Hi @Surajiitmjnu
Thanks for working on this fix.

While reviewing and testing the changes, the dropdown behavior still doesn’t seem to work correctly for all navbar items. Currently, the dropdown appears only for the Technology tab, but clicking on the other navbar items that should trigger dropdowns still doesn’t open anything.

Could you please take another look and ensure the dropdown interaction works consistently across all the intended navbar components?

[dhananjay6561]

Hey @Surajiitmjnu 👋 — thanks for putting this PR together, we appreciate the effort!

We've gone ahead and requested a Copilot review on this. Here's some context from the reviewer:

Critical logic bug: Technology onClick toggles setShowCommunityDropdown instead of setShowTechDropdown. Both links open wrong dropdown.

Once you've had a chance to go through the comments, please address the feedback and resolve the threads — and we'll get this across the line. Feel free to ask if anything's unclear. Happy coding! 💙

[Copilot]

Pull request overview

This PR aims to fix navbar dropdown interaction on touch/tablet devices (e.g., iPads) by adding click-to-toggle behavior for non-hover devices while preserving hover behavior on desktop.

Changes:

• Added onClick handlers to Technology and Community top-level nav links to toggle dropdowns on non-hover devices.
• Added logic intended to keep only one dropdown open at a time by closing the other dropdown when toggling.
• Prevented navigation when tapping top-level dropdown triggers on non-hover devices.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Technology nav item click handler toggles showCommunityDropdown and sets showTechDropdown(false), so on non-hover devices tapping “Technology” will never open the Technology dropdown (and may incorrectly open the Community dropdown). Update this handler to toggle showTechDropdown and close showCommunityDropdown instead.

Suggested change

	setShowCommunityDropdown((v) => !v);
	setShowTechDropdown(false);
	setShowTechDropdown((v) => !v);
	setShowCommunityDropdown(false);

[Copilot]

On non-hover devices this handler always calls e.preventDefault(), which makes it impossible to navigate to /technology by tapping the “Technology” top-level link. Consider only preventing navigation on the first tap (to open the dropdown) and allowing navigation when it’s already open, or add an explicit “View all Technology” link inside the desktop dropdown so the category page remains reachable.

[Copilot]

On non-hover devices this handler always calls e.preventDefault(), which makes the “Community” top-level link unable to navigate to /community via tap. Consider allowing navigation on a second tap / when the dropdown is already open, or add a “View all Community” link inside the desktop dropdown so the category page is still accessible on touch devices.

Suggested change

	if (window.matchMedia("(hover: none)").matches) {
	e.preventDefault();
	setShowCommunityDropdown((v) => !v);
	setShowTechDropdown(false);
	}
	}}
	if (window.matchMedia("(hover: none)").matches && !showCommunityDropdown) {
	e.preventDefault();
	setShowCommunityDropdown(true);
	setShowTechDropdown(false);
	}
	}}

[Copilot]

PR description says dropdowns now “toggle on click for non-hover devices”, but the desktop “Resources” dropdown still relies on onMouseEnter/onMouseLeave only. If iPad/tablet viewports render the desktop nav (md:flex), “Resources” may still be unusable on touch; consider adding the same click-to-toggle behavior there as well.