-
Notifications
You must be signed in to change notification settings - Fork 20
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
feat(Navigation): new pinned feature and reorder #3717
Conversation
🦋 Changeset detectedLatest commit: e4d5e0d The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
size-limit report 📦
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #3717 +/- ##
=======================================
Coverage 89.58% 89.58%
=======================================
Files 190 190
Lines 4196 4196
Branches 629 629
=======================================
Hits 3759 3759
Misses 321 321
Partials 116 116 Continue to review full report in Codecov by Sentry.
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Issue with menu and active item while pinned. The pin item is not getting hidden when and overlaps with badge. (check video)
Screen.Recording.2024-04-29.at.10.33.20.AM.mov
- Alignment issue for the title/label of each pinned item and nav group header.
-
Pinned section should be always visible and with an empty state when no elements are pinned.
-
While reorder we should disable the initial nav item that is dragged
-
Drag & drop handler (cursor) should appear when you hover the drag icon/action and whole you drag and drop the cursor should be different.
-
When you pin an item you should have a toaster message
-
No items from the pinned section can be active similar to the rest of the items.
packages/plus/src/components/Navigation/components/PinnedItems.tsx
Outdated
Show resolved
Hide resolved
packages/plus/src/components/Navigation/components/PinnedItems.tsx
Outdated
Show resolved
Hide resolved
packages/plus/src/components/Navigation/components/PinnedItems.tsx
Outdated
Show resolved
Hide resolved
7c694cd
to
d6562cc
Compare
860b75c
to
c8772b8
Compare
Summary
Type
Introducing pin feature on Navigation ✨
Navigation is nice for traveling around in your website but it lacked some customization. Pinned feature is here to overcome this issue and provide a new way to customize your navigation. This feature can be enabled adding
pinnedFeature
on your<NavigationProvider />
Pinned feature allows you to pin / unpin your favorite items until it reach the limit you've set using
pinLimit
on your<NavigationProvider />
.It also allows you to re-order your pinned items by using drag n drop and placing it in the order you like.
All your pinned items can be accessed with the hook
useNavigation()
:You can of course provide your initially pinned items to the
<NavigationProvider />
by using the propinitialPinned
.