Feat: Revamp of Navbar UI

[kaushiktak19]

Related Tickets & Documents

No related issue - enhancement to improve navbar and UX.

Description

• Replaced the legacy header/navigation system with a new floating glassmorphism navbar that enhances responsiveness, introduces modern visual effects, and integrates dynamic data (latest posts, search, etc.). Added reusable UI utilities, API endpoints, and layout adjustments to support the new design.

Changes

• Replaced old header/nav scaffold with a floating glassmorphism navbar (FloatingNavbar, FloatingNavbarClient)
• Added desktop hover menus, mobile sheet navigation, keyboard-triggered search (Ctrl+K), and latest-post carousels
• Added reusable component components/ui/collapsible.tsx for animated expand/collapse in mobile nav
• Tweaked navigation-menu.tsx and layout.tsx styles so content clears the floating bar
• Introduced new Next.js APIs:
  • /api/nav-latest – fetches latest technology & community posts
  • /api/search-all – unified search API across posts
• Cleaned up legacy header code paths and redundant imports
• Multiple UI and responsiveness fixes across commits (alignment, sizing, hover effects)

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

• Verified layout spacing and navbar responsiveness across breakpoints (mobile, tablet, desktop)
• Tested hover menus and mobile collapsibles for smooth transitions
• Checked global search modal (Ctrl + K) for functionality and accessibility
• Confirmed API routes return expected JSON payloads (nav-latest, search-all)
• Validated scroll-based navbar shrink/expand behavior
• Run npm run build successfully with no errors.

Demo

• Before :

• After :

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

[amaan-bhati]

The ui is good to start with, the design as well as the implementation also looks great. But there are only a few things we should be careful about:

1. on scrolling, when the navbar shrinnks, we need to be careful about

• the navbar height being a little less so that the user can focus more on the page rather than focusing on the navbar
• the searchbar is not responsive, the placeholder and the font size can be reduced i order to make it responsive

2. The ui of the navbar needs to be responsive, thus, you should try and take care of the nav respinsiveness for medium sized devices as well, since the nav elements are overflowing the navbar

3. the thickness of the navbar in terms of the height shoukld be reduced otherwise it would take up a good amount of space in the mobile screen which is not good for user experience

4. confirm if the saerch functionality is working properly, when typing, the search results do appear but on clicking a specific search result blog, it is not redirecting me to the blog, kindly check

[amaan-bhati]

Hey @kaushiktak19 is this ready for the 2nd review from your end?

[amaan-bhati]

When shrinked, the navbar is missing the keploy logo, i think when shrinked, we should show the small keploy logo, the same one we are showing on navbar in smaller screen sizes.

[amaan-bhati]

When on a specific blog reading pages, the navbar should not differ from the background of the header, there is clear difference between the header bg and the navbar bg.

• Either make the entire header glassmorphic
• Or make the navbar white in blog reading posts