Viet Co Tuong · UI showcase
← Demo hub

AdminShell wireframe

Management 1.2 — GitHub-structure shell recipe for home /dash/* and apps/dash (Skin B density).

Contract from docs/new-design/management/DESIGN.md. Copy this recipe into app layouts — do not extract a package yet. Toggle sidebar on narrow widths via the header button.

BitsCommand ⌘KLightAccount

Quick links

Finished pages use real links and actions here — not placeholder metric grids.

Coming soon

Unfinished features use this skeleton body — title context above, short description, no fake live tables.

  • Planned: activity feed
  • Planned: quota summary

CSS recipe (copy into AppLayouts)

  • Body: solid --v-color-bg — no radial wash as chrome identity.
  • Header: hairline bottom border; flat surface; no drop shadow / blur chrome.
  • Active nav: muted fill + box-shadow: inset 3px 0 0 var(--v-color-primary)— not gradient wash or filled primary pill.
  • Skin B controls: --v-radius-xs, height ~2rem, type ~0.75–0.8125rem.
  • Content: width: min(1280px, 100%) centered.
  • Narrow: sidebar becomes drawer; settings may parent–detail drill-in. Header stays space-between (brand start, account end). Production centered-nav grids must switch back to flex at 768px — hiding the middle nav with display: none otherwise auto-places the avatar in the center column.

← Redesign index

Tùy chỉnh chủ đề ứng dụng

Đăng nhập để lưu chủ đề ứng dụng cá nhân.

Chia sẻ

Sao chép liên kết, chia sẻ hoặc hiện mã QR.