Page frame and shell
The permission-shaped shell built from GET /admin/me/menu: the white RJ HQ corner, a 76px navy rail with the server's label under every icon (wraps to two lines, never shortened), T-a accordion when expanded, T-b / T-d flyouts when collapsed, T-f breadcrumb dropdown, and the header right side (Find order · Jobs · bell · globe · clock).
Covers: page-frame primitive, sidebar designer, menu-item designer, top-bar designer, tab-bar designer. Exports: AppShell, RailItem, Flyout, CrumbSwitcher.
Anatomy
The component as it sits in the product: English, compact, real data shapes.
States
9 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.
Your session has expired
Sign in again with Clerk to carry on.
Density
The phone shell is always comfortable (POWERUPS #15): 44px tap targets, 16px inputs. Compact exists on desktop only; see the desktop page.
English · 中文
Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.
Long string · permission denied
The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).
Not available to your role
Your role is missing view pricing. Nothing here is hidden by mistake: the server sends only what you can do.
Contract
The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.
- Export
AppShell·@rj/admin-kit- Props
me(GET /admin/me) ·menu(GET /admin/me/menu: sections[].items[] key, label, path, type, badge, disabled, children) ·collapsed(⌘B, persisted) ·crumbs·headerRight- Variants
- collapsed (76px labelled rail) · expanded (232px)
- States
- loading · ready · signed-out · session-expired · menu-error
- shadcn / Radix
- Collapsible · Tooltip · DropdownMenu (crumbs) · Sheet (phone drawer)
- Package underneath
- @clerk/nextjs · @tanstack/react-query (useMe) · next-intl · lucide-react
- Accessibility
navlandmarks; rail items are links with the full label as accessible name; ⌘B toggles; focus returns to the toggle- API operations
- admin.me.show · admin.me.menu
- Phone variant
PhoneShell: app bar (menu · title · search · jobs · bell) + bottom bar of 3–5 permitted tabs + drawer accordion- Permission
- renders only what /me/menu returns; nothing is filtered client-side
- Export
RailItem·@rj/admin-kit- Props
item(menu node) ·active·badge- States
- default · hover · active · disabled (menu
disabled) · badge - shadcn / Radix
- Tooltip (collapsed)
- Package underneath
- lucide-react (stroke 1.5)
- Accessibility
- label always visible; aria-current=page
- Export
Flyout·@rj/admin-kit- Props
node·depth2|3 ·openDelay140ms- Variants
- T-b (one column) · T-d mega (level-2 headings over level-3 links, 1–3 columns)
- shadcn / Radix
- HoverCard-like Popover with click + keyboard twins
- Accessibility
- → opens, ← / Esc closes, ↑↓ moves
- Export
CrumbSwitcher·@rj/admin-kit- Props
siblingsfrom the parent menu node- Variants
- T-f
- shadcn / Radix
- DropdownMenu
- Accessibility
- the crumb is a button with aria-haspopup=menu