fma-ds

App Sidebar

An app-shell sidebar block, collapsible to icons: a team switcher (or a static logo), one navigation section per data.nav entry and a user menu.

originalMITChangelogRegistry JSON

Overview

Driven by an AppSidebarData object, so teams, sections and items are data. Render it inside a SidebarProvider.

  • Sub-items: expand inline (variant: "collapse") or open a menu ("dropdown", and always while collapsed to icons).
  • Links: react-aria Links; wrap the app in RouterProvider for client-side routing.
  • Menus: onTeamChange, onAddTeam and onUserAction handle them.

Installation

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/app-sidebar

    Files land in components/fma-ds/app-sidebar/app-sidebar.tsx and 4 more; npm and registry dependencies are installed along with them.

Dependencies

npm
lucide-react@^1.61.0