🔹 Blazor - تخصيص Layout لأجزاء مختلفة من التطبيق

أحيانًا نحتاج أكثر من Layout في نفس تطبيق Blazor: واحد للزوار، وآخر للإدارة، وربما ثالث للهواتف المحمولة. في هذا الدرس، ستتعلم كيف تنشئ أكثر من Layout وتربط كل واحد بصفحات مختلفة حسب الحاجة.

---

🎯 متى نستخدم أكثر من Layout؟

• صفحات الإدارة تختلف عن صفحات المستخدم العادي.
• تريد صفحات بدون قائمة جانبية.
• تحتاج Layout خاص لطباعة أو شاشة تسجيل الدخول.

---

🛠️ خطوات إنشاء أكثر من Layout

✅ 1. أنشئ Layout رئيسي:

<div class="p-4">
    <h2>🌐 الواجهة العامة</h2>
    @Body
</div>

✅ 2. أنشئ Layout إداري:

<div class="admin-container">
    <nav class="bg-dark text-white p-2">⚙️ لوحة التحكم</nav>
    <section class="p-4">
        @Body
    </section>
</div>

---

📥 استخدام Layout مخصص في صفحة معينة

في أعلى الصفحة، استخدم توجيه @layout لتحديد Layout:

@page "/admin-dashboard"
@layout AdminLayout

<h3>📊 لوحة تحكم المشرف</h3>
<p>مرحبًا بك في منطقة الإدارة.</p>

---

⚙️ تخصيص التخطيط تلقائيًا عبر RouteView

يمكنك إنشاء مكون RouteView مخصص لتحديد الـ Layout بناءً على الشرط:

@inherits RouteView

@{
    var layout = RouteData.PageType.Name.Contains("Admin") 
        ? typeof(AdminLayout)
        : typeof(MainLayout);
}

<LayoutView Layout="@layout" RouteData="@RouteData" />

ثم استخدمه في App.razor:

    <Found Context="routeData">
        <CustomRouteView RouteData="@routeData" />
    </Found>
    <NotFound><h3>❌ الصفحة غير موجودة</h3></NotFound>

---

💡 ملاحظات هامة

• كل Layout يجب أن يحتوي على @Body لعرض محتوى الصفحات.
• يمكنك تنسيق كل Layout حسب الغرض منه (ألوان، قوائم، إعدادات...).
• إنشاء Layout متعدد يحسّن تجربة المستخدم حسب الدور أو القسم.

---

✅ خلاصة الدرس

في Blazor يمكنك إنشاء أكثر من Layout وربط كل واحد بمجموعة من الصفحات حسب نوعها. هذه الطريقة تُنظم التطبيق وتجعله أكثر احترافية ومرونة.