# ترويسة الموقع

> شعار الموقع والروابط الرئيسية والإجراءات في شريط ثابت أعلى الصفحة، يطوى في كبسولة عائمة حين تبدأ الصفحة بالتمرير.

الصفحة: https://ritla.app/ar/ui/marketing-header

## التثبيت

يُفتح التثبيت من السجل قريبًا، وهذه هي الأوامر التي ستشغّلها حينها.

```bash
npx ritla add marketing-header
```

أو بأداة shadcn:

```bash
npx shadcn@latest add @ritla/marketing-header
```

الاعتماديات: `@phosphor-icons/react`

## الاستخدام

```tsx
import { MarketingHeader } from "@/components/ui/marketing-header";

<MarketingHeader
  logo={<Wordmark />}
  links={[
    { label: "Components", href: "/ui" },
    { label: "Docs", href: "/docs" },
    { label: "Pricing", href: "/#pricing" },
  ]}
  menuLinks={[{ label: "Sign in", href: "/login" }]}
  actions={<Button size="sm" render={<a href="/#top" />}>Scan your site free</Button>}
/>
```

## أمثلة

### الكبسولة المطويّة

مع `folded` تبقى الترويسة في حالة الكبسولة: بطاقة بخلفية شبه شفافة وحدّ رفيع وظل. ارتفاعها مثل الشريط المفتوح، فلا تتحرك الصفحة تحت إصبع القارئ حين تطوى.

معاينة حيّة: https://ritla.app/_kanz/preview/arabic/marketing-header-folded

## مرجع الخصائص

### `MarketingHeader`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `logo` | `ReactNode` | لا يوجد | شعار الموقع، مرتبطًا بالصفحة الرئيسية. |
| `links` | `{ label, href, current?, lang? }[]` | لا يوجد | الروابط الرئيسية بترتيب القراءة. `current` يضع `aria-current="page"`، و`lang` لنص بلغة أخرى مثل Figma. |
| `actions` | `ReactNode` | لا يوجد | نهاية الشريط: اللغة وتسجيل الدخول وإجراء واحد. تبقى في الشريط على الهاتف. |
| `menuLinks` | `{ label, href }[]` | لا يوجد | روابط إضافية في قائمة الهاتف فقط، بعد `links`. |
| `folded` | `boolean` | لا يوجد | دون هذه الخاصية تُطوى الترويسة مع التمرير؛ `true` أو `false` يثبّت حالة واحدة. |
| `copy` | `{ nav, menu, close }` | لا يوجد | اسم التنقل واسما زر القائمة؛ الافتراضي بلغة الصفحة. |

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

لوحة المفاتيح (المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين، ويتبادل السهمان في الاتجاه من اليمين إلى اليسار):

- `Tab`: الشعار ثم الروابط ثم الإجراءات، وزر القائمة على الشاشات الضيقة.
- `Enter`: يفتح زر القائمة قائمة الروابط تحت الشريط أو يغلقها.

ARIA:

- الترويسة معلم الصفحة (`header`)، والروابط معلم تنقّل باسم («الرئيسية»).
- رابط الصفحة الحالية يحمل `aria-current="page"`.
- زر القائمة يعلن حالته بـ `aria-expanded` ويسمّي ما سيفعله («القائمة» أو «إغلاق القائمة»).

## ملاحظات العربية والاتجاه

ينعكس:

- الشعار في بداية السطر على اليمين، والإجراءات في نهايته على اليسار.
- الأسهم في قائمة الهاتف تشير إلى اليسار.

لا ينعكس:

- الشعار نفسه لاتيني ولا ينعكس.

الأرقام: لا أرقام تكتبها الترويسة.

الخط العربي: الروابط `body-14` بوزن Medium، و`body-16` في قائمة الهاتف.