shadcn.io is not affiliated with official shadcn/ui
Secondary Nav Sidebar Block for Vue
An invoicing app in a fixed-height window whose sidebar pins a second nav to the foot, Support and Feedback, with Feedback opening a popover form that answers and checks its row.
Installation
Overview
Keep help one press away with this secondary nav sidebar for Vue with Ark UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar for Remitbarn, an invoicing app, with five pages above a smaller nav pinned to the foot: Support and Feedback. Support is a page like the others. Feedback opens a Popover with a labelled Textarea and an outline Send button, which answers Thanks, saved in this demo, nothing was sent, closes the form and puts a check on the row. The block has no filled button. The page is the invoice list. Built from Sidebar, Popover, Textarea, Field, Button and Guides, with a CSS entrance only. For apps that keep help and feedback beside the main navigation.
FAQ
Why is the second nav in the foot?
It is help, not a destination, so it sits apart from the five pages and stays in view however long the main list grows. It is its own labelled nav, Help, so screen reader users can jump to it.
What happens when I send feedback?
An empty message is refused with a line that says to write a few words first. Otherwise the form closes, the message is cleared, the row gets a check and its name becomes Feedback, sent, and the status line says nothing was sent.
Why is it a popover on a wide screen and inline on a phone?
On a phone the sidebar is a modal sheet, and a popover opened from inside it fights the sheet for focus. The same form opens under the row instead, with the same labels and the same button.
What happens when the sidebar folds to icons?
The rail keeps both navs as icons with tooltips, and the Feedback popover opens above its icon. The person's name is hidden while folded. 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.
What stays in the page, and how do I connect it?
Everything. The invoices and the message are local, and Send only clears them. Post the message in the submit handler and attach the current page so replies have context.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Choosing a page closes the sheet; Feedback stays open inline so the form is in reach. The status line under the page says what happened, and the sheet carries its own copy of it while it is open.