AppShell şablonu

Bu şablon AppShell bileşenini sayfa düzeyinde kurar: gezinme grupları, üst çubuk, PageHeader ve içerik kabı. Gösterge paneli, liste, ayarlar ve hesap blokları bu şablonun içine yerleşir.

Önizleme

Sayfa başlığındaki marka ve mod seçimi önizlemeyi de değiştirir. Daraltma düğmesiyle kenar menüsünü ikonlara indirin; dar pencerede menü açılır panele dönüşür.

Canlı örnek, StorybookStorybook'ta aç

Canlı örnek, StorybookStorybook'ta aç

Canlı örnek, StorybookStorybook'ta aç

Bölgeler

Bölge	Öğe	Not
İçeriğe geç bağlantısı	AppShell	İlk sekme durağı; main öğesine götürür.
Kenar menüsü	nav	“Genel” ve katlanabilen “Yönetim” grupları; geçerli sayfa aria-current="page".
Üst çubuk	header	Arama düğmesi, Bildirim merkezi, Hesap menüsü ve dar ekranda menü düğmesi.
Sayfa başlığı	PageHeader	Tek h1, açıklama, isteğe bağlı breadcrumbs ve sayfa işlemleri.
İçerik	Container	width="lg" gösterge ve listeler, md form ve ayarlar için.

Sayfa adı <title> öğesinde Sayfa · Ürün adı biçimindedir.

Kırılım noktaları

Genişlik	Düzen
1024 px altı	Kenar menüsü gizli; üst çubuktaki düğme soldan kayan paneli açar (motion.drawer).
1024 px ve üstü	256 px kenar menüsü; daraltılınca 48 px, etiketler ekran okuyucu için kalır.
1440 px ve üstü	İçerik Container ile sınırlanır; satır uzunluğu okunur kalır.

Erişilebilirlik

• Yer işaretleri: nav (adlı), header, main; içeriğe geç bağlantısı odağı main öğesine taşır.
• Sayfa değişiminde odak yeni sayfanın h1 başlığına gider; yönlendirme katmanı bunu yapar.
• Daraltma düğmesi aria-expanded ve aria-controls taşır.
• Dar ekran menüsü odağı içinde tutar, Escape ile kapanır ve odağı menü düğmesine geri verir.

Kod

import { AppShell, Button, Container, Icon, NavGroup, NavItem, PageHeader, Stack } from '@bigbang/ui';
import type { BreadcrumbItem, IconName } from '@bigbang/ui';
import type { ReactNode } from 'react';
import { AccountMenu } from '../../blocks/account-menu/AccountMenu';
import { NotificationsCentre } from '../../blocks/notifications-centre/NotificationsCentre';
import { type Lang, LangProvider } from '../../patterns/lang';

const copy = {
  tr: {
    product: 'Ürün adı',
    general: 'Genel',
    admin: 'Yönetim',
    search: 'Ara',
    pages: { home: 'Ana sayfa', projects: 'Projeler', records: 'Kayıtlar', reports: 'Raporlar', team: 'Ekip', account: 'Hesap', settings: 'Ayarlar' },
  },
  en: {
    product: 'Product name',
    general: 'General',
    admin: 'Administration',
    search: 'Search',
    pages: { home: 'Home', projects: 'Projects', records: 'Records', reports: 'Reports', team: 'Team', account: 'Account', settings: 'Settings' },
  },
};

export type AppPage = keyof (typeof copy)['tr']['pages'];

const general: { id: AppPage; icon: IconName; badge?: number }[] = [
  { id: 'home', icon: 'home' },
  { id: 'projects', icon: 'layout-grid' },
  { id: 'records', icon: 'list', badge: 3 },
  { id: 'reports', icon: 'file' },
];
const admin: { id: AppPage; icon: IconName }[] = [
  { id: 'team', icon: 'user' },
  { id: 'account', icon: 'user' },
  { id: 'settings', icon: 'settings' },
];

export type AppShellTemplateProps = {
  /** The current page: marks the navigation item and names the page. */
  current: AppPage;
  /** Page title (h1); defaults to the navigation label of `current`. */
  title?: string;
  description?: string;
  breadcrumbs?: readonly BreadcrumbItem[];
  /** Page-level actions at the end of the header. */
  actions?: ReactNode;
  /** Shows the header skeleton while the page loads. */
  loading?: boolean;
  /** Content width: `lg` for dashboards and lists, `md` for forms and settings. */
  width?: 'md' | 'lg' | 'full';
  children: ReactNode;
  defaultCollapsed?: boolean;
  /** Opens the notifications panel or the account menu of the header on first render. */
  headerOpen?: 'notifications' | 'account';
  /** `empty` starts the notifications centre with no notifications. */
  notifications?: 'some' | 'empty';
  lang?: Lang;
};

/**
 * The signed-in page template: AppShell navigation and a top bar with search, notifications and the
 * account menu, a PageHeader with the page's h1,
 * and the content in a Container. Blocks fill `children`.
 */
export function AppShellTemplate({ current, title, description, breadcrumbs, actions, loading, width = 'lg', children, defaultCollapsed, headerOpen, notifications = 'some', lang = 'tr' }: AppShellTemplateProps) {
  const t = copy[lang];
  const mainId = `main-${current}-${lang}`;
  return (
    <LangProvider lang={lang}>
      <AppShell
        mainId={mainId}
        className="min-h-[44rem]"
        {...(defaultCollapsed === undefined ? {} : { defaultCollapsed })}
        brand={<strong className="type-label-md text-fg-default">{t.product}</strong>}
        header={
          <div className="ms-auto flex items-center gap-sm">
            <Button variant="secondary" size="sm" startIcon={<Icon name="search" />}>
              {t.search}
            </Button>
            <NotificationsCentre lang={lang} state={notifications} defaultOpen={headerOpen === 'notifications'} />
            <AccountMenu lang={lang} defaultOpen={headerOpen === 'account'} />
          </div>
        }
        nav={
          <>
            <NavGroup label={t.general}>
              {general.map((item) => (
                <NavItem key={item.id} href="#" label={t.pages[item.id]} icon={item.icon} current={item.id === current} {...(item.badge ? { badge: item.badge } : {})} />
              ))}
            </NavGroup>
            <NavGroup label={t.admin} collapsible>
              {admin.map((item) => (
                <NavItem key={item.id} href="#" label={t.pages[item.id]} icon={item.icon} current={item.id === current} />
              ))}
            </NavGroup>
          </>
        }
      >
        <Container size={width} className="py-2xl">
          <Stack gap="2xl">
            <PageHeader
              title={title ?? t.pages[current]}
              {...(description ? { description } : {})}
              {...(breadcrumbs ? { breadcrumbs } : {})}
              {...(actions ? { actions } : {})}
              {...(loading ? { loading } : {})}
            />
            {children}
          </Stack>
        </Container>
      </AppShell>
    </LangProvider>
  );
}

Kullanılan bileşenler

AppShell, PageHeader, Container, Button, Breadcrumbs. Bu şablonu kullanan bloklar: Gösterge paneli, Boş gösterge paneli, Liste ve filtreler, Ayarlar, Hesap özeti.