shadcn.io is not affiliated with official shadcn/ui
Project Progress Sidebar Block for Svelte
A project planner in a fixed-height window with an inset sidebar: seven projects each with a small progress ring and its percent, two archived and hidden until a Show archived switch turns them on, and the open project's task list on the page.
Installation
Overview
Keep many projects in view with this project management sidebar for Svelte with Ark UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar with the inset variant: the rail's tint fills the window and the page is a raised, rounded panel set into it. The rail lists seven projects, and each row carries a small Circular Progress ring and its percent. Two of the seven are archived and hidden by default; a Switch named Show archived sits in the group label's row and brings them back, and a polite line says how many projects are showing. The page is the chosen project's task list with each task Done, In progress or To do, and Archive project in the top bar moves the open project out of the list, or back into it as Restore project. Folded to icons the rail keeps each project's icon with a tooltip, and on a phone it is a sheet. It's built from Sidebar, Circular Progress, Switch, Shine Button, Avatar and Guides, with a CSS entrance only. For planners, trackers, workspaces and any list of work with a lot of finished items.
FAQ
Where does each ring's percent come from?
From the project's tasks: its done count over its task count, rounded down, so a ring only reads 100% when every task is done. The ring and the page's task list read the same numbers and cannot disagree. The ring is decorative, and the row's accessible name says, for example, "Website relaunch, 62% done".
How does Show archived work?
The switch holds one boolean. Off, the list leaves out archived projects; on, it shows all seven and the archived rows are quieter and say archived in their names. The status line says how many are showing and how many are hidden. Archive project in the top bar adds the open project to the archived set, or Restore project removes it.
Why is the page a div and not SidebarInset?
SidebarInset renders a main element and the page this block sits on already has one. The page is a plain div that wears the classes SidebarInset adds beside an inset rail: a margin that leaves the rail's tint around it, a radius and a shadow, from the medium breakpoint up.
How are the projects wired?
The projects are links to # whose handler shows the page instead of navigating. Point them at your routes and mark the current one with isActive and aria-current.
What stays in the page, and how do I connect it?
Everything. The seven projects, their tasks and the archived flags are typed in PROJECTS, and the switch and archive state live only in the block's state. The block sets persist={false} and shortcut={false}, so it writes no cookie and leaves Ctrl and Command with B to the page it sits on. To connect it, load the projects and task counts from your API, save the archived flag when it changes, and keep the rings worked out from the counts.
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. The Show archived switch is in it, so you can bring the archived projects back before you pick one. Choosing a page closes the sheet and puts focus back on the button, and the status line under the page says what changed.