fix: improve navbar dropdown menu UX on hover and click #618
Conversation
✅ Deploy Preview for circuitverse ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Rate limit exceeded@blazethunderstorm has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 0 minutes and 19 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
WalkthroughThe code refactors the dropdown menu interaction logic in the NavbarLink2 component. It introduces explicit reactive state management for menu open/close, adds delayed hover and click event handling, emits new events for menu actions, and updates styling for improved user experience and responsiveness. Changes
Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes were found. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
@ThatDeparted2061 @niladrix719 @Arnabdaz pls review |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
src/components/Navbar/NavbarLinks/NavbarLink/NavbarLink2.vue (2)
80-96: Consider consolidating redundant event emissions.The function emits both
menu-clickandmenu-toggleevents with the same payload, which seems redundant.Since
menu-toggleis emitted in all cases where the menu state changes (click, hover, item click), consider removing themenu-clickemission or differentiating their purposes more clearly.
102-125: Consider making hover delays configurable.The hover delays are hardcoded (150ms for open, 200ms for close). Consider making these configurable through props for better flexibility across different use cases.
Add props for hover delays:
const props = defineProps({ navbarItem: { type: Object, default: () => ({}) }, + hoverOpenDelay: { type: Number, default: 150 }, + hoverCloseDelay: { type: Number, default: 200 }, })Then use them in the timeout functions:
- }, 150) + }, props.hoverOpenDelay)- }, 200) + }, props.hoverCloseDelay)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Navbar/NavbarLinks/NavbarLink/NavbarLink2.vue(3 hunks)
🔇 Additional comments (1)
src/components/Navbar/NavbarLinks/NavbarLink/NavbarLink2.vue (1)
174-205: Well-implemented style improvements!The styling enhancements effectively address the PR objectives:
- Smooth transitions prevent flickering
- Hover states provide clear visual feedback
- Min-width ensures consistent menu sizing
- Max-height with scroll handles long dropdown lists gracefully
|
@ThatDeparted2061 @niladrix719 @Arnabdaz pls review the pr |
There was a problem hiding this comment.
This was not an issue actually just a different working logic, but anyway @blazethunderstorm, your logic is better UX
@Arnabdaz @niladrix719
Fixes #605
Describe the changes you have made in this PR -
I made the dropdown menu in the navbar work better. Now it opens when you hover or click, and it closes properly without any flickering. I also made the design a bit smoother and cleaned up the code so it’s easier to understand and works well.
Screenshots of the changes (If any) -
Before ---
Screencast.from.2025-06-16.02-16-38.mp4
After ---
Screencast.from.2025-06-16.02-18-42.mp4
Note: Please check Allow edits from maintainers. if you would like us to assist in the PR.
Summary by CodeRabbit
New Features
Style