معرفات التصنيف: 1, 3

ازاي تنظم الـ Layouts المتعددة (Dashboard vs Website) في مشروع Inertia واحد باحترافية

يا هلا بيك يا بشمهندس! لو انت شغلت دماغك في مشروع بتستخدم فيه إينرتيا جي إس (Inertia.js) مع لارافيل (Laravel) وفريم وورك للفرونت إند زي فيو جي إس (Vue.js) أو ريآكت (React)، غالباً قابلتك المشكلة الكلاسيكية دي: عندك موقع عام (Public Website) تصميمه هادي وفيه هيدر وفوتر عاديين، وفجأة محمول عليك تعمل لوحة تحكم (Admin Dashboard) بتصميم تاني خالص، جانبي (Sidebar) وواجهات معقدة.

الناس المبتدئة أول ما بتبدأ، بتلاقي نفسها تايهة. يا إما بيحطوا كل حاجة في لاي أوت واحد وضغط كبير في الـ Conditions، يا إما بيكتبوا كود مكرر كتير. بس احب أقولك إن الحل موجود وأنيق جداً، واسمه التخطيطات المستمرة أو اللاي أوتس المستمرة (Persistent Layouts). تعال بقى في المقال ده أشرح لك خطوة بخطوة إزاي تفصل بينهم وتظبط دنيتك زي العمالقة.

إيه هي الـ Persistent Layouts وليه بنحتاجها في Inertia؟

زمان، لما كنا بننقل من صفحة لصفحة، الصفحة كلها كانت بتعمل إعادة تحميل (Full Page Reload)، والـ Layout كان بيتقفل ويتفتح من أول وجديد. لكن مع إينرتيا (Inertia.js)، الوضع اتغير؛ الصفحات بتنقل بسلاسة كأنها تطبيق موبايل (SPA)، من غير ما الصفحة تعيد تحميل نفسها كلياً.

المشكلة فين؟ لو الـ Layout مش مستمر (Persistent)، كل ما تفتح صفحة جديدة جوه الـ Dashboard مثلاً، الـ Sidebar والـ Header ممكن يحصلهم إعادة ريندر (Re-render) وده بيضيع الـ State أحياناً أو بيعمل وميض (Flicker) مش لطيف. هنا بقى بتيجي فكرة الـ Persistent Layouts في Inertia، اللي بتخلينا نثبت الهيكل العام ونغير بس محتوى الصفحة (Page Content).

الخطوة الأولى: تجهيز ملفات الـ Layouts في الفرونت إند (Vue.js مثالاً)

عشان نبني نظام محترم، لازم نعمل فصل تام للملفات. هندخل على مجلد الـ Components عندنا ونعمل مجلد جديد اسمه layouts، وجنوه هنعمل ملفين أساسيين:

• ملف WebsiteLayout.vue: ده خاص بالموقع العام (الصفحة الرئيسية، من نحن، اتصل بنا).
• ملف DashboardLayout.vue: ده خاص بلوحة التحكم (الإحصائيات، إدارة المستخدمين، الإعدادات).

تعال نشوف مثال بسيط لشكل الـ Dashboard Layout:

<script setup>
// هنا ممكن تحط الـ Logic الخاص بالـ Sidebar أو الـ User Dropdown
</script>

<template>
    <div class="dashboard-container" style="display: flex;">
        <aside class="sidebar" style="width: 250px; background: #2d3748; color: #fff;">
            <h3>لوحة التحكم</h3>
            <ul>
                <li><a href="/dashboard">الرئيسية</a></li>
                <li><a href="/dashboard/users">المستخدمين</a></li>
            </ul>
        </aside>
        <main class="main-content" style="flex: 1; padding: 20px;">
            <slot />
        </main>
    </div>
</template>

الخطوة الثانية: ربط صفحات الـ Dashboard باللاي أوت الخاص بيها

السحر الحقيقي في Inertia بيظهر في طريقة ربط الصفحة بالـ Layout بتاعها. بدل ما نستورد اللاي أوت جوه الـ Template بالطريقة القديمة، بنستخدم خاصية الـ layout جوه ملف الـ Vue نفسه.

مثلاً، لو عندنا صفحة مستخدمين اسمها Users/Index.vue جوه الـ Dashboard، هنكتب الكود بالشكل ده:

<script>
import DashboardLayout from '@/Layouts/DashboardLayout.vue';

// بنعرف الـ Layout هنا عشان Inertia تفهم إن الصفحة دي تبع الداشبورد
export default {
    layout: DashboardLayout
}
</script>

<script setup>
defineProps({ users: Array });
</script>

<template>
    <div>
        <h1>إدارة المستخدمين</h1>
        <p>هنا هيظهر جدول المستخدمين بكل بياناتهم...</p>
    </div>
</template>

بنفس الفكرة تماماً، لو عندنا صفحة تابعة للموقع العام زي Home.vue، هنعمل ليها استيراد لـ WebsiteLayout ونربطه بيها، وبكده ضمننا إن كل قسم واخد شكله المستقل تماماً من غير أي تداخل في الكود.

الخطوة الثالثة: التعامل مع التداخلات والـ Nested Layouts (لو احتاجت)

في المشاريع الضخمة، ساعات بتعوز تعمل Layout جوه Layout (Nested Layouts). مثلاً، الداشبورد نفسها فيها قسم خاص بالتقارير ليه تصميم فرعي مختلف شوية. Inertia بتدعم ده بمرونة عالية جداً، وممكن تخلي الـ Layout يقبل functions بترجع أكثر من مستوى تخطيط، بس في 90% من المشاريع، الفصل بين WebsiteLayout و DashboardLayout كفاية وزيادة وبيغطي كل الاحتياجات.

نصيحة من أخوك المبرمج

يا صديقي، البرم مش بس إن الكود يشتغل، البرم هو إن الكود يكون نظيف وقابل للصيانة (Maintainable). لما تبدأ مشروع جديد بـ Inertia و Laravel، اول حاجة تعملها هي التخطيط لهيكل الملفات (Folder Structure). اوعى تكسل وتعمل ملفات ضخمة فيها ملايين السطور. افصل الـ Components، نظبط الـ Layouts من اليوم الأول، وهتلاحظ بنفسك إزاي التطوير هيبقى أسرع بكتير وإنت قاعد حاطط رجل على رجل.