style(navbar): rotate dropdown icons when menu is open#5230
Open
Dsp023 wants to merge 1 commit intoasyncapi:masterfrom
Open
style(navbar): rotate dropdown icons when menu is open#5230Dsp023 wants to merge 1 commit intoasyncapi:masterfrom
Dsp023 wants to merge 1 commit intoasyncapi:masterfrom
Conversation
Dsp023
requested review from
akshatnema,
anshgoyalevil,
derberg,
princerajpoot20 and
sambhavgupta0705
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📝 WalkthroughWalkthroughThe pull request threads an Changes
Sequence DiagramsequenceDiagram
participant User
participant NavBar
participant NavItem
participant NavItemDropdown
User->>NavBar: Hover on "Learning" menu
NavBar->>NavBar: Update state: open = 'learning'
NavBar->>NavItem: Render with isOpen={true}
NavItem->>NavItemDropdown: Pass isOpen={true}
NavItemDropdown->>NavItemDropdown: Apply className with -rotate-180
NavItemDropdown-->>User: Icon rotated 180°
User->>NavBar: Move mouse away
NavBar->>NavBar: Update state: open = null
NavBar->>NavItem: Render with isOpen={false}
NavItem->>NavItemDropdown: Pass isOpen={false}
NavItemDropdown->>NavItemDropdown: Remove rotation
NavItemDropdown-->>User: Icon rotated back to original
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #5230 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 22 22
Lines 796 796
Branches 146 146
=========================================
Hits 796 796 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Contributor
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-5230--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
components/navigation/NavItem.tsx (1)
25-26: Consider documenting theisOpenprop in JSDoc.The new
isOpenprop is not documented in the component's JSDoc comment.Suggested addition
* `@param` {boolean} [props.hasDropdown=false] - Indicates if the navigation item has a dropdown menu. + * `@param` {boolean} [props.isOpen=false] - Indicates if the dropdown menu is currently open. * `@param` {string} [props.className=''] - Additional CSS classes for styling.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/navigation/NavItem.tsx` around lines 25 - 26, Add a JSDoc `@param` entry for the new boolean prop isOpen on the NavItem component so it appears in the component's JSDoc (e.g., the NavItem props block or Props interface). Document its type (boolean), default value (false), and brief purpose such as "controls whether the dropdown/menu is open (controlled)". Ensure the param name matches exactly "isOpen" so tools pick it up alongside existing props like hasDropdown and className.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@components/navigation/NavItem.tsx`:
- Around line 25-26: Add a JSDoc `@param` entry for the new boolean prop isOpen on
the NavItem component so it appears in the component's JSDoc (e.g., the NavItem
props block or Props interface). Document its type (boolean), default value
(false), and brief purpose such as "controls whether the dropdown/menu is open
(controlled)". Ensure the param name matches exactly "isOpen" so tools pick it
up alongside existing props like hasDropdown and className.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 9f8db256-f122-4c6c-8e8b-bcfeedccfaed
📒 Files selected for processing (4)
components/icons/NavItemDropdown.tsxcomponents/navigation/MobileNavMenu.tsxcomponents/navigation/NavBar.tsxcomponents/navigation/NavItem.tsx
Dsp023
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR rotates the navigation dropdown icons (chevrons) by 180 degrees when the menu is active/open to clearly signal the menu state.
Closes #4984
Changes made:
NavItemDropdowncomponent to accept anisOpenprop and apply a-rotate-180Tailwind class when true.NavItemto accept and pass down theisOpenprop to the dropdown icon.NavBar.tsxandMobileNavMenu.tsxto pass the active state (isOpen={open === '<menu>'}) down to theNavItemandNavItemDropdowncomponents.Summary by CodeRabbit