التنقل الجانبي
شريط التطبيق الجانبي: الشعار والبحث وروابط الصفحات والحساب، موسّعًا أو بالأيقونات فقط.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
التثبيت
أضف المكوّن
npx ritla add side-navigationويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/side-navigationالاعتماديات التي يضيفها
@phosphor-icons/reactأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { NavItem, SideNavigation, SideNavigationGroup } from "@/components/ui/side-navigation";<SideNavigation aria-label="Main"> <SideNavigationGroup> <NavItem href="/" icon={HouseIcon} label="Home" selected /> <NavItem href="/payments" icon={ReceiptIcon} label="Payments" count={3} /> </SideNavigationGroup></SideNavigation>أمثلة
هيكل التطبيق
مبدّل مساحة العمل، ومجموعات بعناوين، والمستخدم مع تسجيل الخروج (Figma: Sidebar app shell، تجريبي).
مرجع الخصائص
SideNavigation
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
variant | "expanded" | "collapsed" | "expanded" | خاصية Style: موسّع (296 بكسل) أو مطوي (80 بكسل). |
aria-label | string | لا يوجد | اسم منطقة التنقل. |
NavItem
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
label | string | لا يوجد | خاصية Label. |
icon | IconComponent | لا يوجد | خاصية Icon: أي أيقونة من Phosphor. |
selected | boolean | false | الحالة Selected: الصفحة الحالية، بـ aria-current="page". |
count | number | لا يوجد | خاصية Show count: شارة عدد في النهاية. |
render | ReactElement | لا يوجد | عنصر رابط بدل <a>، مثل <Link> في Next. |
SideNavigationWorkspace
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
avatar / name / description | ReactNode | لا يوجد | صورة مساحة العمل واسمها ووصفها؛ زر يفتح قائمة مساحات العمل. |
SideNavigationGroup
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
label | ReactNode | لا يوجد | عنوان اختياري للمجموعة، يُخفى عند الطي. |
إرشادات الاستخدام
التنقل الجانبي يحمل وجهات التطبيق على الحاسوب، في عمود بجوار المحتوى. هنا: ترتيبه، وجهته في العربية، وطيّه، والبطاقة المميزة، وما تتحقق منه قبل التسليم.
1. الترتيب والتجميع
الوجهات الرئيسية أولًا، ثم فراغ، ثم الإعدادات والدعم. وصف الحساب دائمًا في الأخير.
افعل
- رتّب حسب عدد مرات الزيارة.
- أبقِ «الإعدادات» و«الدعم» في الأسفل في كل تطبيق.
تجنّب
- الترتيب الأبجدي.
- إضافة فاصل بين كل عنصرين.
2. العربية والاتجاه من اليمين إلى اليسار
يقع العمود على اليمين في العربية. وتبقى الأيقونات عند بداية كل عنصر، وتنتقل الأسهم والأعداد إلى نهايته.
3. العمود المطوي
المطوي يعرض الأيقونات وحدها بعرض 80 بكسل، وتبقى التسمية اسمًا يُعلَن لكل رابط. واعرضها في تلميح عند التمرير والتركيز.
افعل
- أبقِ حالة الاختيار ظاهرة وهو مطوي.
- اسمح بتوسيعه مجددًا بزر التبديل في الأعلى.
تجنّب
- إخفاء صف الحساب وهو مطوي؛ اعرض الصورة الرمزية.
4. البطاقة المميزة
بطاقة اختيارية واحدة لمهمة تعريفية أو عرض، فيها عنوان وسطر واحد وإجراءان على الأكثر.
افعل
- اسمح بإغلاقها.
- استبدل بها المهمة التالية حين تنتهي.
تجنّب
- تكديس بطاقتين.
- استخدامها للأخطاء؛ استخدم تنبيهًا في المحتوى.
قبل التسليم
- الحالتان الموسّعة والمطوية في الاتجاهين.
- حالة الاختيار ظاهرة على وجهة حقيقية.
- سلوك الهاتف مدوّن: تنتقل العناصر نفسها إلى الدرج الجانبي.
إمكانية الوصول
لوحة المفاتيح
المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.
| المفتاح | ما يفعله |
|---|---|
| Tab | ينتقل بين الروابط بالترتيب. |
ARIA
- الشريط
<nav>باسم، والروابط في قائمة<ul>. - الصفحة الحالية
aria-current="page". - في الوضع المطوي تبقى التسمية نصًا مخفيًا بصريًا، فيُقرأ اسم كل رابط.
ملاحظات العربية والاتجاه
ينعكس
- الشريط على اليمين في العربية، وخطه الفاصل على يساره.
- الأيقونة في بداية السطر وشارة العدد في نهايته.
لا ينعكس
- الشعار والبريد الإلكتروني لا ينعكسان.
- الأيقونات غير الاتجاهية (الرئيسية، البطاقة) تبقى كما هي.
- الأرقام
- شارة العدد تتبع إعداد الأرقام في
RitlaProvider. - الخط العربي
- التسميات
label-16بوزن Medium، والمحددة Semibold. - النص ثنائي الاتجاه
- البريد الإلكتروني معزول باتجاه LTR.
افعل
- النسخة العربية، فيقع شريط الاختيار على الحافة الصحيحة.
- أبقِ الشعار عند بداية السطر.
تجنّب
- عكس شعار العلامة أو أيقونات المنتجات.
- إبقاء العمود على اليسار في العربية لأن الكود فعل ذلك.