App Shell
Sidebar, topbar ve içeriği birleştiren uygulama çerçevesi.
AppShell.tsx
Ana içeriğe geç
Archintel App
Dashboard Çalışma Alanı
AppShell bileşeni responsive sidebar, üst gezinti çubuğu ve ana içerik alanını bütünleşik olarak koordine eder.
Kurulum
shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:
$
npx shadcn@latest add https://ui.cagriozay.com.tr/r/app-shell.jsonKullanım Örneği
import { AppShell } from "@/components/layout/AppShell"
<AppShell
sidebarGroups={navigationGroups}
sidebarActiveId={activeId}
onSidebarSelect={setActiveId}
topbarProps={{ brand: "Workspace" }}
fixedHeight
>
<Dashboard />
</AppShell>Özellikler & Parametreler (API)
| Prop | Tür | Varsayılan | Açıklama |
|---|---|---|---|
| sidebarGroups | SidebarNavGroup[] | — | Hazır sidebar içinde gösterilen navigasyon grupları. |
| sidebarActiveId | string | — | Aktif navigasyon öğesinin kimliği. |
| onSidebarSelect | (id: string) => void | — | Navigasyon seçildiğinde çağrılır ve mobil drawer'ı kapatır. |
| sidebarCollapsed | boolean | — | Kontrollü masaüstü sidebar daraltma durumu. |
| defaultSidebarCollapsed | boolean | false | Kontrolsüz ilk daraltma durumu. |
| onSidebarCollapsedChange | (collapsed: boolean) => void | — | Daraltma durumu değiştiğinde çağrılır. |
| topbarProps | TopbarProps | — | Hazır Topbar bileşeninin özellikleri. |
| topbar | ReactNode | — | Özel üst çubuk slotu. |
| sidebar | ReactNode | — | Özel masaüstü sidebar slotu. |
| fixedHeight | boolean | false | Shell'i dinamik viewport yüksekliğine sabitler. |
| mainId | string | "app-shell-main" | Ana içerik ve skip-link hedef kimliği. |
| sidebarLabel | string | "Ana navigasyon" | Sidebar ve mobil dialog erişilebilir adı. |
| skipLinkLabel | string | false | "Ana içeriğe geç" | Skip-link metni veya kapatma seçeneği. |