shadcn.io is not affiliated with official shadcn/ui
Blog Admin Sidebar Block for React
A blogging platform in a fixed-height window whose slim sidebar opens with a Recently edited group of up to four pages, a Clear button and a draft count on Posts, above four admin groups.
Installation
Overview
Jump back to what you were editing with this blog admin sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds a slim Sidebar for Inkdale, a blogging platform. Recently edited sits on top of Content, Media, Design and Users and holds up to four pages, newest first. Choosing a page anywhere pushes it to the top, moving it if it is already there. Clear empties the group to a quiet line. Posts shows a count of its drafts as a badge, derived from the post list, and each draft on the page has a Publish button that lowers it. Built from Sidebar, Sidebar Menu Badge, Button and Guides, with a CSS entrance only. For admin panels, CMSs and any rail with many pages and a few you keep returning to.
FAQ
How does Recently edited work?
Opening any page, from the group or from one of the four below, puts it at the top. A page already in the list moves up instead of repeating. The list keeps four; the fifth falls off the end and the status line names it.
What does Clear do?
It empties the group and leaves one quiet line, Nothing edited yet, in the same slot. The button stays but says the list is already empty if pressed again. The pages themselves are not touched; opening one starts the list again.
Where does the draft count come from?
It is the number of posts marked as drafts, shown as a badge on Posts and in its link's name and tooltip. Publishing a draft on the page lowers it, and at zero the badge goes away. It is never typed, so it cannot disagree with the list.
What happens when the sidebar folds to icons?
The rail keeps the four groups' pages as icons with tooltips and hides Recently edited. 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 posts and other lists are typed at the top of the file, and Publish only changes the block's state. Call your publish endpoint in the handler and store the recents list per person to make it real.
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 and updates Recently edited. The status line under the page says what happened, and the sheet carries its own copy of it while it is open.
Related
- Pro
A knowledge workspace in a fixed-height window whose muted sidebar has a Favorites group above All pages, where a star on every row pins a page, up to five.
- Pro
A browser IDE in a fixed-height window whose sidebar lists open editors above Code, Source control and Deploy, with close buttons, unsaved-change dots, Close all and Reopen closed.
- Pro
Simple Groups Sidebar
Headers and sectionsA company handbook in a fixed-height window whose muted sidebar has four groups of pages and a density toggle: Roomy, Default and Compact set the size of the rows and the gaps, and the rail prints the measured row height.
- Pro
HR Portal Sidebar
App contentAn HR portal in a fixed-height window whose sidebar is a people directory: 24 people under sticky letter headings with an A to Z rail that jumps to a letter, and a card for the chosen person with a manager button.
- Pro
A planning app in a fixed-height window whose sidebar groups, Projects, Documents and Tags, each have a plus that opens an inline create row and a menu with Sort A to Z, Sort by recent and Collapse.
- Pro
Collapsible Groups Sidebar
Folds and treesA framework's docs in a fixed-height window whose slim sidebar has five groups that fold from their labels, with Expand all and Collapse all, a count of open groups and a dot on a folded group that holds the current page.