Open dhavalveera opened 2 months ago
Latest commit: b61bb93a0a086c2259fcba1ffa0821fa141f58a7
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
The latest updates on your projects. Learn more about Vercel for Git ↗︎
Name | Status | Preview | Comments | Updated (UTC) |
---|---|---|---|---|
flowbite-react | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Jun 20, 2024 2:07am |
flowbite-react-storybook | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Jun 20, 2024 2:07am |
The recent update introduces a custom menu icon feature for a Navbar component within a React application. It includes a new component withCustomMenuIcon
that provides personalization in menu icons, various client and server examples, and updates to support custom toggle menu icons in existing NavbarToggle
components. This change enhances the user experience by enabling more customization options for the navigation bar's appearance and behavior.
Files | Change Summary |
---|---|
apps/web/content/docs/components/navbar.mdx |
Added example for using a custom Open Menu/Bar Icon |
apps/web/examples/navbar/index.ts |
Export withCustomMenuIcon |
apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx |
Introduced withCustomMenuIcon component for a Navbar with a custom menu icon |
packages/ui/src/components/Navbar/Navbar.stories.tsx |
Added CustomToggleMenuIconNavbar story |
packages/ui/src/components/Navbar/NavbarToggle.tsx |
Enhanced to support barIcon and closeIcon props toggle functionality |
The changes introduce a new feature for customizing menu icons. Below is the sequence diagram for the new functionality:
sequenceDiagram
participant User
participant NavbarComponent
participant CustomIconComponent
participant ReactIcons
User->>NavbarComponent: Clicks to open menu
NavbarComponent->>CustomIconComponent: Request custom icon
CustomIconComponent->>ReactIcons: Import barIcon (CiMenuFries)
ReactIcons-->>CustomIconComponent: Provide barIcon
CustomIconComponent-->>NavbarComponent: Render barIcon
NavbarComponent-->>User: Display custom menu icon
User->>NavbarComponent: Clicks to close menu
NavbarComponent->>CustomIconComponent: Request closeIcon
CustomIconComponent->>ReactIcons: Import closeIcon
ReactIcons-->>CustomIconComponent: Provide closeIcon
CustomIconComponent-->>NavbarComponent: Render closeIcon
NavbarComponent-->>User: Display close menu icon
In the code where menus shine, A custom icon, sleek design, With Flowbite's charm and React's grace, Our Navbar has a brand new face. Toggle here and toggle there, Beauty dances through the air! 🌟
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
Hello,
Currently the NavbarToggle is showing the same Icon even if the Toggle Menu is open or closed, this PR makes the fix for it by adding a default Close Icon as well as extending for the User to modify the close Icon.
Furthermore, there wasn't any documentation for the Navbar for the User to modify the default
BarIcon
to the custom Icon, this PR fixes that issue as well by adding the Example in the Documentation for using the CustomBarIcon
.This PR helps the User to use the Custom SVG Icon instead of relying on the default one (as no documentation was available until this PR) and progressing & extending Navbar properly & make Production Ready
Summary by CodeRabbit
New Features
CiMenuFries
fromreact-icons/ci
.Documentation