shadcn.io is not affiliated with official shadcn/ui
Marketplace Sidebar Block for Solid
A handmade-goods marketplace in a fixed-height window: a Buying and Selling switch that swaps the rail's navigation and badges over a shared Account group, and a page that lists the open item.
Installation
Overview
Let one account buy and sell with this marketplace sidebar for Solid with Ark UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar on a muted rail: the product's mark, a Buying and Selling Segment Group, the mode's navigation and an Account group that both modes share. Buying lists Browse, Categories, Deals, Orders and Saved; Selling lists My products, Orders, Reviews and Payouts, and badges show how many deals, orders, saved searches or orders waiting to ship there are. Beside it, a top bar names the open item and holds one action that follows the mode, a Shine Button: Save search while buying and New listing while selling, and both change a badge. The page says the mode and, while selling, how many orders are to ship, counted from the orders themselves, and lists the open item in real text. An empty list shows an Empty state. The rail collapses to the icons of the mode in use, and below the medium breakpoint it becomes a sheet. It's built from Sidebar, Segment Group, Empty, Avatar, Shine Button and Guides, with a CSS entrance only. For marketplaces, two-sided platforms and any app where one account has two roles.
FAQ
What does the mode switch change?
The group under it. The segment group holds the mode in the block's state, and the navigation is the list of pages that belong to that mode, so switching swaps the links and their badges and opens the mode's first page. The Account group doesn't depend on the mode, so Messages and Help stay put, and if one of them is open it stays open. In your app, drive the same switch from the user's roles and hide the mode they can't use.
Where do the badges and the orders-to-ship count come from?
From the typed lists in PAGES: a badge is the number of rows in its list, and "orders to ship" counts the selling orders whose status is To ship. Nothing is typed twice, and a page that only browses (Browse, Categories, Reviews, Payouts and Help) has no badge. Save search and New listing add a row to Saved and to My products, so their badges and the lists change together.
What stays in the page, and how do I connect it?
Everything. The listings, orders, reviews and payouts are typed in the block, and nothing is bought, sold, published or saved; reloading starts over. Replace the handlers with your API. The pages are links to # whose handler opens the list instead of navigating.
How does it work on a phone?
Below the medium breakpoint the sidebar becomes a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The mode switch and the navigation live in the sheet, so the status line at the foot of the window states the live result ("Selling: 3 orders to ship."). Escape or choosing a page closes the sheet and focus goes back to the menu button.
What happens when the sidebar collapses?
The menu button or the rail along the sidebar's edge folds it to icons. The mode switch has no folded form, so it gives way, and the icons are those of the mode you were in, each with a tooltip that includes its badge ("Orders (3)"). The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
Is it accessible?
The sidebar is a navigation landmark named after the product, with each group named by its label and the open page marked as the current page. A link's name includes its count ("Orders, 3"). The segment group is named Mode, the list is labelled by the page, one polite status line reports each change, and names and amounts are isolated so they read right in a right-to-left layout.