Gallery

Design a side-docked menu component for a web app. It lives pinned to the left or right edge of the viewport, stays partially visible when collapsed, and expands on hover, click, or keyboard focus. The dock should feel like part of the app chrome, not a floating widget.

Show the collapsed state, expanded state, and the transition between them. In the collapsed state, use icons, spacing, and a clear affordance so users can tell the dock can open. In the expanded state, labels, group separators, and active-item styling should make navigation fast to scan. Keep the open panel anchored to the edge so it never feels detached from the trigger.

Include interaction states for hover, pressed, focus, and selected items. If the dock can be dragged, show the grab handle and the repositioning feedback. If it can be pinned or unpinned, make that control visible and secondary to navigation. The component should work with both mouse and keyboard, and it should collapse cleanly when space is tight.