Redesigning Navbar Using TailwindCSS

[che3zcake]

What has changed?

This PR addresses the feature request to redesign and implement the Navbar using TailwindCSS (or a UI library).
I have made all the necessary changes listed in the PR and completed the implementation as described.

I can revamp the whole navbar but I wasn't sure what design would be fitting and so i went with the mix of the previous navbar and custom tailwind implementation.

Keploy.Documentation.1.mp4

This PR Resolves #2769

Type of change

Please delete options that are not relevant.

• [ ✅ ] New feature (non-breaking change which adds functionality).

How Has This Been Tested?

I have done both npm run build and npm run serve and both runs fine. I have attached the screenshot of the output of both commands

Checklist:

• [✅ ] My code follows the style guidelines of this project.
• [✅ ] I have performed a self-review of my own code.

[github-actions]

Thank you and congratulations 🎉 for opening your very first pull request in keploy

[Copilot]

Pull Request Overview

This PR revamps the site navbar by replacing static items with TailwindCSS-styled dropdown components and wiring them into the theme.

• Introduces CustomProductsDropdown and CustomBlogDropdown with TailwindCSS styling.
• Registers the new dropdowns in ComponentTypes.js and updates docusaurus.config.js to use them.
• Adds small CSS modules and updates theme navbar item logic for consistency.

Reviewed Changes

Copilot reviewed 27 out of 33 changed files in this pull request and generated 2 comments.

File	Description
src/theme/NavbarItem/CustomProductsDropdown.js	Adds TailwindCSS-styled products dropdown component.
src/theme/NavbarItem/CustomBlogDropdown.js	Adds TailwindCSS-styled blog dropdown component.
src/theme/NavbarItem/ComponentTypes.js	Registers custom dropdown types in the component map.
docusaurus.config.js	Switches navbar items to use new custom dropdown types.

Comments suppressed due to low confidence (3)

src/theme/NavbarItem/CustomProductsDropdown.js:6

• [nitpick] The state variable drop is ambiguous. Rename it to isDropdownOpen (and setIsDropdownOpen) for clearer intent.

  const [drop, setDrop] = useState(false);

src/theme/NavbarItem/CustomBlogDropdown.js:40

• [nitpick] The state updater setDrop and its usage are unclear. Consider renaming to isDropdownOpen / setIsDropdownOpen to improve readability.

            onClick={() => setDrop((prev) => !prev)}

src/theme/NavbarItem/CustomProductsDropdown.js:5

• There are no tests for this new dropdown component. Consider adding unit tests to cover open/close behavior and keyboard interactions.

export default function CustomProductsDropdown() {

[Copilot]

Add a trailing comma after the last property for consistency with the project's style guide.

Suggested change

	'custom-blog-dropdown': CustomBlogDropdown
	'custom-blog-dropdown': CustomBlogDropdown,

[Copilot]

Add an aria-label to the toggle button (e.g. aria-label="Toggle products menu") to improve screen reader support.

[amaan-bhati]

Hey @che3zcake Thanks for raising this PR, the nav ui looks slighlty better now. Just a few concerns in the preview:

1. I think the ui of the nav after hover should be in dark mode when the dark mode is turned on, the nav ui is still in light mode even when the dark mode is on.
2. The animation looks a bit slow to me, you can take references from the keploy landing page and match the speed of the animation if you want to.

[che3zcake]

@amaan-bhati hey really sorry I didn’t get notification for the comment you left, will work on the changes you mentioned above.

[che3zcake]

@amaan-bhati I looked into the points you raised:

1. I have matched the speed of the animations with reference to the main keploy page.
2. about the dark mode of the floating menu item ui, the thing i did earlier to match the dark theme was make the blur (if you are able to notice) black in the dark mode and white in the light mode but I also don't have any actual design reference on how the floating ui should look like in the dark mode. So if any changes is expected please provide a design reference.

[Achanandhi-M]

Hey @che3zcake, thanks a lot for raising the PR! We’re planning to move away from Docusaurus, so we won’t be needing these changes right now and will be closing this one.

We really appreciate your effort and would love for you to pick up another good first issue — your contributions are always welcome! 💛