feat: Introducing the Dock Component: A Versatile UI Element for Organized Navigation

[kashyap20]

This pull request introduces the Dock component, a powerful and customizable UI element designed to enhance navigation within your application.

Usage Examples:

• Dashboards
• Content Management Systems
• Development Environments

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
motion-primitives	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 9, 2024 4:22pm

[ibelick]

Thanks for the PR, it's great! :) Could we make the example responsive, maybe with fixed width and scrollable? Let me know your thoughts!

[kashyap20]

Thanks for the PR, it's great! :) Could we make the example responsive, maybe with fixed width and scrollable? Let me know your thoughts!

Thanks for the feedback! I’ll work on making it responsive. Adding a scrollable area is possible, but it might show the default browser scrollbar, which could affect the design. I'll give it a try and see how it looks.

[kashyap20]

Thanks for the PR, it's great! :) Could we make the example responsive, maybe with fixed width and scrollable? Let me know your thoughts!

I've made it work on smaller screens by adding horizontal scrolling and hiding the scrollbar, as it doesn't look good. If the dock exceeds the container width, the items will appear partially visible, indicating more items to the left or right. Let me know if you want any other changes.

[kashyap20]

I found a bug where the content behind the dock container was inactive because it was covered by an invisible container. To fix this, I created a new DockContainer component with pointer-events: none and set pointer-events: auto on DockItem. This resolved the issue. I also added a default dock height to fix the problem where labels weren't visible at low magnification.

[ibelick]

Thanks for the quick fixes @kashyap20! Noticed the hover effect isn't working between DockItem now. Could you check that out? Appreciate it!

[kashyap20]

Thanks for the quick fixes @kashyap20! Noticed the hover effect isn't working between DockItem now. Could you check that out? Appreciate it!

I have pushed a fix for this

[ibelick]

@kashyap20 thanks! One more thing: I can't scroll horizontally on my phone now. Could you check that? Also, what's your X account? I would like to tag you when I release it.

[kashyap20]

@kashyap20 thanks! One more thing: I can't scroll horizontally on my phone now. Could you check that? Also, what's your X account? I would like to tag you when I release it.

x account id: aniketx27

Just to clarify, are you saying you can't scroll the dock horizontally? I checked on my phone, and I'm able to scroll horizontally.

[kashyap20]

@ibelick I found the issue. It works on Chrome, but the problem is with Safari. I will find a fix for this

[kashyap20]

@ibelick The issue was caused by setting the container's pointer-events to none and the child's to auto, which didn't work as expected in Safari. To fix it, I'm now dynamically calculating the parent's height to give enough space for the label to display properly.

[kashyap20]

@ibelick Hey, I don't think we should move all styles out of the Docks component. We should keep default styles in the component, so users can modify them if needed. Removing all default class names would force users to write every class name from scratch. If we keep default classes, they can simply add or override styles as needed.

What do you think? I'll follow whatever you decide.

[ibelick]

Hey @kashyap20. Ok, let's keep the default styles :)

[kashyap20]

@ibelick I've moved some styles from the Docks component to AppleStyleDock and left the rest as default.