fix: prevent desktop navbar from redirecting on touch devices#386
Open
debayanCODES-1 wants to merge 1 commit into
Open
fix: prevent desktop navbar from redirecting on touch devices#386debayanCODES-1 wants to merge 1 commit into
debayanCODES-1 wants to merge 1 commit into
Conversation
Signed-off-by: Debayan <debayanpaulofficial2024@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes: keploy/keploy#3431
The Problem:
Currently, when viewing the Keploy Blog on an iPad or large tablet (devices that render the desktop navigation bar but lack native hover support), interacting with the "Technology" or "Community" dropdowns results in a poor user experience. Because touch devices interpret a tap on a as an immediate click event, users are instantly redirected to the category pages instead of opening the mega-menu dropdown to view its contents.
The Solution:
This PR resolves the issue by intelligently intercepting the onClick event on these navigation links specifically for touch devices, allowing them to act natively as dropdown toggles.
Key Changes:
Updated the Link components in components/navbar/FloatingNavbarClient.tsx for the "Technology" and "Community" desktop navigation items.
Implemented a precise touch-device check using the modern window.matchMedia('(hover: none) and (pointer: coarse)').matches API.
If a touch device is detected, the click event correctly calls e.preventDefault() to block the hard redirect and dynamically toggles the mega-menu's visibility state (setShowTechDropdown / setShowCommunityDropdown).
Testing Performed
Tablet/Touch Simulation: Verified via Chrome DevTools (Device Toolbar -> iPad) that tapping "Technology" and "Community" smoothly drops down the glassmorphism mega-menu options instead of redirecting the user.
Desktop Functionality: Confirmed that the standard desktop browser hover functionality (onMouseEnter / onMouseLeave) remains completely unaffected for mouse users.
Type of Change
Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Checklist
My code follows the style guidelines of this project
I have performed a self-review of my own code
I have added the standard DCO sign-off (-s) to my commits