Skip to content

Conversation

@Atul-Chahar
Copy link

@Atul-Chahar Atul-Chahar commented Jan 4, 2026

Related Tickets & Documents

Fixes: keploy/keploy#3431

Description

This PR addresses issue #3431 by upgrading the mobile navigation experience to ensure parity with the desktop version. Previously, the "Technology" and "Community" menu items functioned as simple links that redirected users immediately.

This change converts them into collapsible dropdowns (accordions), matching the behavior of the existing "Resources" section. This allows mobile users to explore sub-categories and recent posts directly from the menu without forced page reloads.

Changes

  • Component Refactor: Modified components/navbar/FloatingNavbarClient.tsx to replace static Link components with Collapsible components for the mobile view.
  • State Logic: Implemented mobileTechOpen and mobileCommunityOpen state hooks to manage dropdown visibility independently.
  • Dynamic Content: Integrated techState and communityState to render the 4 most recent items and a "View All" link within the mobile accordion.
  • Design Alignment: Re-used existing glassmorphism and color tokens to maintain design system consistency.

Type of Change

  • Chore (maintenance, refactoring, tooling updates)
  • Bug fix (non-breaking change that fixes an issue)
  • New feature (change that adds functionality)
  • Breaking Change (may require updates in existing code)
  • UI improvement (visual or design changes)
  • Performance improvement (optimization or efficiency enhancements)
  • Documentation update (changes to README, guides, etc.)
  • CI (updates to continuous integration workflows)
  • Revert (undo a previous commit or merge)

Testing

  • Ran npm run dev to verify the application compiles and executes without runtime errors.
  • Verified component tree structure to ensure correct nesting of Collapsible, CollapsibleTrigger, and CollapsibleContent.
  • Validated mobile menu logic using Chrome DevTools (Device Mode) to confirm expected expansion behavior.

Demo

  • Before: Direct links to /technology and /community causing immediate navigation.
screenshot-2026-01-04_07-40-25
  • After: Interactive expandable lists showing recent posts + a "View All" link.
screenshot-2026-01-04_08-10-43

Environment and Dependencies

  • New Dependencies: None
  • Configuration Changes: None

Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have made corresponding changes to the documentation
  • I have added corresponding tests
  • I have run the build command to ensure there are no build errors
  • My changes have been tested across relevant browsers/devices
  • For UI changes, I've included visual evidence of my changes

Signed-off-by: Atul Chahar <chaharatul92@gmail.com>
@Atul-Chahar Atul-Chahar force-pushed the fix/mobile-navbar-dropdowns branch from 4413752 to 32177fb Compare January 4, 2026 18:46
@amaan-bhati amaan-bhati self-requested a review January 6, 2026 23:46
Copy link
Member

@amaan-bhati amaan-bhati left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @Atul-Chahar thanks for raising this pr, unfortunately for this pr there has been an existing pr solving the issue which has been merged, hence the issue is resolved now, so, we'd be closing this pr, thanks for your time and energy.
reference: 5f8263e

@amaan-bhati amaan-bhati closed this Jan 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[blog-website]: Fix blog navbar dropdown ui on mobile devices

2 participants