shadcn.io is not affiliated with official shadcn/ui
Newsletter Editor Sidebar Block for Vue
A newsletter editor in a fixed-height window: an outline in the rail that follows a scrolling issue in real text, marks the section in view, and Download HTML saves the issue as a file.
Installation
Overview
Give a newsletter editor an outline that follows the page with this newsletter editor sidebar for Vue with Ark UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar: the product's mark, an outline of six sections (Header, Intro, Feature, Links, Sponsor and Footer), a Campaigns group that counts drafts and scheduled issues, and the signed-in person at the foot. Beside it, a top bar names the section in view and holds Download HTML, a Shine Button and the only colored control. The page is a scrollable region holding one issue in real text. As you scroll it, the outline marks the section in view as the current location; press a section in the outline and the region scrolls to it and holds the mark there until you scroll again, so even a short last section can be reached. Download HTML saves the issue as a real file built from the typed text. The rail collapses to one icon per section with tooltips, and below the medium breakpoint it becomes a sheet. It's built from Sidebar, Avatar, Shine Button and Guides, with a CSS entrance only. For editors, long documents, docs pages and any app whose navigation follows a scrolling page.
FAQ
How does the outline follow the scroll?
The page region listens to its own scroll and picks the last section whose top has reached the top of the region, or the last section when the region is scrolled to its end. Pressing an outline link scrolls the region to that section and pins the mark on it until the wheel, a touch or a key moves the region, because a section near the end can never reach the top and would otherwise lose the mark to its neighbour. The block does this itself so it works in the window; in a full page, a table-of-contents component or an intersection observer does the same job.
What does Download HTML save?
A small HTML file, built when you press the button from the same typed sections the page shows, so the file and the screen can't disagree. It's created in the tab with a Blob and a temporary link; nothing is uploaded. In your app, replace it with your own export or send, and keep the rule that the preview and the output come from one source.
What stays in the page, and how do I connect it?
Everything. The issue and the campaign counts are typed in the block, nothing is edited, saved or sent, and reloading starts over. Replace the typed sections with your editor's content and the counts with your server's. The outline items are links to # whose handler scrolls the region 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. Choosing a section closes the sheet and scrolls the issue to it, and the status line at the foot of the window states where you are ("Feature: section 3 of 6."). The issue scrolls inside its own region, so the page behind never moves.
What happens when the sidebar collapses?
The menu button or the rail along the sidebar's edge folds it to icons: one for each section, with a tooltip that says its position ("Feature (3 of 6)"). The Campaigns group has no folded form, so it gives way. 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, and the section in view is marked as the current location and says so in its name ("Feature, section 3 of 6, in view"). The issue is a labelled scrollable region you can reach with Tab and scroll with the arrow keys. One polite status line reports each jump, and the text is isolated so it reads right in a right-to-left layout.