Skip to content

Navbar dropdown style update #270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

Raj2raaz
Copy link

@Raj2raaz Raj2raaz commented Jul 3, 2025

Description

This PR resolves issue #269 by improving the navbar dropdown styling. It replaces the harsh black border with a subtle light-gray border, adds a soft shadow for elevation, and introduces rounded corners to create a more polished and consistent look across the site.


Changes Made

  • Updated dropdown container styles:
    • Replaced the black border with a light gray border (border-gray-200).
    • Added a soft shadow (shadow-lg) for subtle elevation.
    • Introduced rounded corners (rounded-xl) to match other UI elements.
  • Ensured no new colors were introduced—maintained the site's existing color palette.
  • Improved the overall user experience by making the dropdown feel integrated and polished.

Screenshots

image


Checklist

  • My changes adhere to the project's contribution guidelines.
  • Code changes are implemented cleanly and follow existing structure.
  • The updated dropdown styling looks consistent across the site.

Copy link

github-actions bot commented Jul 3, 2025

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow Status Details
🔨 Continuous Integration ✅ Passed Build completed successfully
📝 Code Linting ✅ Passed All formatting and style checks passed

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

@FirePheonix
Copy link
Contributor

I think this change is good.
But I have some other experiments I've always wanted to try it :)

image_2025-07-06_162723940

go to https://leonardo.ai
See their landing pages' navbar. -> Hover over the features dropdown.
And there you'll be able to see that there's an image to the left and text to the right side. I want something similar for our navbar as well.
So for the image of navbar, you can use any of the assets images (except for the ones on the home page [the '/' routed page]).

Experiment this and send me the screen recording.

@Raj2raaz
Copy link
Author

Raj2raaz commented Jul 6, 2025

@FirePheonix
This looks like an interesting change. I'll start working on it and share an update with you shortly.

@FirePheonix
Copy link
Contributor

Any updates on the dropdown feature?

@Raj2raaz
Copy link
Author

Raj2raaz commented Jul 7, 2025

@FirePheonix I'll share my changes with you by the end of the day

Comment on lines +230 to +236
// <motion.div
// className="absolute top-2 left-2 bg-black/60
// backdrop-blur-sm rounded-lg sm:rounded-xl p-2.5 sm:p-4 md:p-6 shadow-lg
// max-w-[180px] sm:max-w-[220px] md:max-w-xs transform hover:scale-105
// transition-all duration-300 ease-out z-10 border border-white/50"
// whileHover={{ scale: 1.05 }}
// >
Copy link
Member

Choose a reason for hiding this comment

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

If you want to remove the code why comment it? Just remove it :) (IF you feel that piece is not required).

There is something called as multi line comment please see how to use it :)

Copy link
Author

Choose a reason for hiding this comment

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

Yes, you're right. I'll make sure to take care of these things next time.
At that time, I was facing some issues with GitHub checks, and when I restored those lines, the error got resolved.
Anyway, I'll be more careful about such mistakes in the future.

@Raj2raaz
Copy link
Author

Raj2raaz commented Jul 8, 2025

image
@FirePheonix I worked upon the dropdown as you suggested. The dropdown looks somewhat like this, would you like me to add something more to the style. I can also add in more data as you suggested in the screenshot you shared, if you provide me with the things I should add.

@FirePheonix
Copy link
Contributor

show it to me which image you've chosen?

@Raj2raaz
Copy link
Author

Raj2raaz commented Jul 9, 2025

Actually, I didn’t research much since you already asked Devin Ulibarri about the image.

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.

3 participants