الشريط الجانبي

الشريط الذي يجلس على يسار الصفحة في الإنجليزية يجلس على يمينها في العربية، وينتقل وحده إذا كان التخطيط grid أو صفّ flex وكان العمود أول عنصر في ترتيب الـ DOM، لأن المحور المضمّن يتبع dir. فلا تكتب grid-template-columns: 240px 1fr ثم تعكسها بيدك داخل [dir="rtl"]، فالقيمة نفسها صحيحة في الاتجاهين ما دام المسار الأول هو البداية المنطقية. والانكسار الحقيقي يأتي من position: fixed مع left: 0 ومحتوى مزاح بـ margin-left: 240px، فهنا لا ينعكس شيء إطلاقاً، والصحيح inset-inline-start: 0 مع margin-inline-start على المحتوى.

الخطّ الذي يفصل الشريط عن المحتوى مرسوم على الحافّة المواجهة للمحتوى، أي border-inline-end لا border-right، ومع border-right يقفز الخطّ في العربية إلى الحافّة الخارجية للنافذة ويُترك التقاء الشريط بالمحتوى بلا فاصل. وشريط تمرير قائمة الروابط يقع على تلك الحافّة نفسها لأنه يلزم نهاية المحور المضمّن، فينتقل من اليمين إلى اليسار مع انقلاب الاتجاه، وأي padding-right أُضيف ليبعد النصّ عنه يبقى في الجهة الخطأ، والبديل padding-inline-end أو scrollbar-gutter: stable. وإن رسمت الفصل بظلّ بدل الحدّ فتذكّر أن box-shadow بلا صيغة منطقية، فاضرب إزاحته الأفقية في متغيّر اتجاه لينعكس معه.

العناصر الفرعية داخل مجموعة تُزاح عن حافّة البداية، أي إلى اليمين في العربية، والإزاحة padding-inline-start: 2rem على عنصر القائمة لا padding-left ولا margin-left. ولا تصنعها بمسافات فارغة ولا بـ text-indent موجب: المسافات تدخل في نصّ الرابط وتُقرأ معه، وtext-indent يزيح السطر الأول وحده فينكسر الشكل حين تلتفّ التسمية على سطرين. والخطّ الرأسي الذي يدلّ على التداخل مكانه inset-inline-start: 0 على المجموعة، ويُرسم بعنصر زائف حتى ينتقل معها إلى الجهة الأخرى.

سهم الطيّ أيقونة اتجاهية: هو يشير نحو الحافّة التي سينطوي العمود إليها، فينعكس مع الصفحة. أمّا أيقونة الهامبرغر فثلاثة خطوط أفقية متماثلة حول المحور الرأسي، وقلبها بـ scaleX(-1) لا يفيد شيئاً ما دامت الخطوط متساوية، ويعكس التصميم فعلاً متى اختلفت أطوالها. والقاعدة العملية: لا تكتب [dir="rtl"] svg { transform: scaleX(-1) } أبداً، بل ضع صنفاً مخصّصاً على الشيفرونات وأسهم الرجوع وحدها، واترك أيقونات الأقسام (البيت، المستخدم، الإعدادات، الجرس) كما هي.

الطيّ تغيير في العرض لا إزاحة في المكان، والعرض لا جهة له فلا ينعكس منه شيء. ولو نفّذته بـ transform: translateX(-190px) ارتكبت خطأين معاً: خرج العمود من الحافّة الخطأ في العربية لأن التحويلات بلا صيغة منطقية وإزاحتها تحتاج الضرب في متغيّر اتجاه، وبقيت في التخطيط فجوة بعرضه كاملاً لأن transform لا يمسّ المساحة التي يشغلها العنصر. حرّك inline-size، أو انقل الانتقال إلى grid-template-columns مع إبقاء عدد المسارات نفسه في الحالتين حتى تُحسب القيم الوسيطة، أمّا متغيّر ‎--sidebar-w وحده فيقفز قفزاً ما لم تسجّله بـ @property بصيغة <length>.