هيكل التطبيق

التخطيط القياسي للتطبيق: شريط التنقل العلوي في الأعلى، والتنقل الجانبي عند بداية السطر، ومحتوى الصفحة على خلفية اللوحة.

جارٍ تحميل العرض التوضيحي: app-shell-default

التثبيت

npx sdaia-ui@latest add app-shell

الاستخدام

import { AppShell } from '@/components/ui/AppShell';
import { NavHeaderMenuItem } from '@/components/ui/NavHeaderMenuItem';
import { NavLogoPlaceholder } from '@/components/ui/NavLogoPlaceholder';

1<AppShell
2  header={(layout) => ({
3    logo: <NavLogoPlaceholder size="medium" text="SDAIA" />,
4    items: [<NavHeaderMenuItem key="home" label="Home" mobile={layout === "compact"} />],
5  })}
6  sideNavigation={{ groups, footerProps: { mainText: "User name" } }}
7  navigation="expanded"
8>
9  {/* page content */}
10</AppShell>

الأمثلة

التنقل المطوي

تعرض `navigation="collapsed"` شريط الأيقونات بعرض 64 بكسل. يبدّل زر رأس التنقل الجانبي بين الوضع الموسّع (255 بكسل) والمطوي؛ استخدم `navigation` مع `onNavigationChange`، أو `defaultNavigation`.

جارٍ تحميل العرض التوضيحي: app-shell-collapsed

الشريط العلوي فقط

احذف `sideNavigation` في الصفحات التي لا تحتاجه، مثل صفحات الأخطاء. تحتفظ منطقة المحتوى بخلفية اللوحة والمسافات الداخلية.

جارٍ تحميل العرض التوضيحي: app-shell-header-only

من اليمين إلى اليسار

مع `dir="rtl"` ينتقل التنقل الجانبي إلى اليمين، وينعكس الشريط العلوي، وتنقلب كل أيقونة لها اتجاه.

جارٍ تحميل العرض التوضيحي: app-shell-rtl

السلوك المتجاوب

سطح المكتب (1280 بكسل فأكثر): شريط التنقل العلوي كاملًا، وعمود التنقل الجانبي (255 بكسل موسّعًا أو 64 بكسل مطويًا)، ثم المحتوى.
الجهاز اللوحي والجوال (أقل من 1280 بكسل): يُطوى التنقل الجانبي داخل قائمة الشريط العلوي. يعرض الشريط العلوي نسخته المدمجة (الشعار وزر القائمة)، وتعرض القائمة عناصر الشريط العلوي، ثم مجموعات التنقل الجانبي وتذييله، ثم إجراءات الشريط. يأخذ المحتوى العرض الكامل دائمًا.
تقتصر قائمة الشريط العلوي على ارتفاع الشاشة وتمرَّر وحدها، فيبقى كل عنصر قابلًا للوصول على الشاشات القصيرة.
تتبع المسافات الداخلية للمحتوى رمز المسافات: 24 بكسل على سطح المكتب، و20 بكسل على الجهاز اللوحي، و16 بكسل على الجوال. يتم التبديل عبر CSS فقط، فيتطابق ما يعرضه الخادم والمتصفح.

إمكانية الوصول

المعالم: يحتوي <header> على عنصر <nav> الخاص بالشريط العلوي، والتنقل الجانبي عنصر <nav> مستقل له اسم، ومحتوى الصفحة هو معلم <main>.
رابط التخطي هو أول نقطة توقف عند الضغط على Tab؛ يظهر عند التركيز وينقل التركيز إلى المحتوى (labels.skipToContent).
يعلن زر طيّ التنقل الجانبي عن aria-expanded. ويحمل العنصر الحالي aria-current="page" في التنقل الجانبي وفي نسخته داخل قائمة الشريط العلوي.
قائمة الشريط العلوي عنصر إفصاح: يعلن زر القائمة عن aria-expanded، ويغلق Escape القائمة ويعيد التركيز إلى الزر، كما يغلقها اختيار عنصر من التنقل الجانبي.
أعطِ عنصري التنقل اسمين مختلفين (labels.navigation في الشريط العلوي وفي التنقل الجانبي) ليميّز مستخدمو قارئات الشاشة بينهما.

AppShell

الخاصية	النوع	القيمة الافتراضية	مطلوبة
header	AppShellHeaderProps \| (layout: "desktop" \| "compact") => AppShellHeaderProps	—	اختيارية
sideNavigation	AppShellSideNavigationProps	—	اختيارية
navigation	"expanded" \| "collapsed"	—	اختيارية
defaultNavigation	"expanded" \| "collapsed"	"expanded"	اختيارية
onNavigationChange	(navigation) => void	—	اختيارية
menuOpen	boolean	—	اختيارية
onMenuOpenChange	(open: boolean) => void	—	اختيارية
contentClassName	string	—	اختيارية
labels	Partial<AppShellLabels>	{ skipToContent: "Skip to main content" }	اختيارية
dir	"ltr" \| "rtl"	—	اختيارية
children	ReactNode	—	اختيارية

جميع المكوّنات

المخطط المساحي