مرحبًا بالجميع، أحاول تكوين (على الأجهزة المحمولة) لوحة القائمة الجانبية (الهامبرغر) لتنزلق من الجانب الأيمن من الشاشة، تمامًا كما هي مضبوطة لوحة الملف الشخصي. أرى أن هناك قاعدة left: 0 محددة خاصة بلوحة القائمة الجانبية. لقد قمت بضبط كود CSS لكنني لم أستطع تكرار سلوك الانزلاق لليسار الخاص بلوحة الملف الشخصي. لا يبدو أن هناك الكثير من كود CSS المخصص للوحة القائمة الجانبية، لذا لست متأكدًا تمامًا مما قد أكون قد أغفلته.
سأقدّر أي نصائح أو رؤى حول ما قد أكون قد أغفلته هنا! شكرًا لكم جميعًا.
مرحبًا لوكاس، أهلاً بك في Meta 
لا يوجد الكثير من CSS متضمن هنا. يتم التعامل مع الحركة باستخدام CSS، لكن قيم الإزاحة تُحدَّد في JavaScript للتعامل مع الحالة التي يقوم فيها المستخدم بالتمرير أو السحب يمينًا أو يسارًا لإغلاق القوائم.
معظم هذا المنطق موجود هنا - هذه مجرد طريقة واحدة؛ هناك عدة طرق أخرى متضمنة في ذلك الملف
discourse/app/assets/javascripts/discourse/app/components/site-header.js at 8a250a1eac9032485e7d367f93e6ac418014e2ff · discourse/discourse · GitHub
هناك أيضًا بعض المنطق الذي يتعامل مع الحالة التي ينقر فيها المستخدم على الخلفية المظلمة لإغلاق القوائم.
لقائمة المستخدم
لقائمة الهامبرغر
تعديل هذه الأجزاء لجعل قائمة الهامبرغر تفتح وتغلق من اليمين سيتطلب أمرين.
تعديل مكون site-header باستخدام ModifyClass بحيث تفتح جميع القوائم من الجانب الأيمن. حاليًا، يتحقق من وجود فئة معينة في القائمة، لذا يمكننا ببساطة تجاوز ذلك كما يلي:
api.modifyClass("component:site-header", {
pluginId: "right-side-mobile-hamburger",
_leftMenuClass() {
// لا نريد أي قوائم يسرى، لذا نرجع false
return false;
}
});
عند إغلاق القائمة، نريد أيضًا أن تغلق من الجانب الأيمن. بالنسبة لحدث التمرير/السحب، يتم التعامل مع هذا بالفعل بواسطة المقطع أعلاه. الآن نحتاج إلى إصلاح الحالة التي ينقر فيها المستخدم على الخلفية المظلمة. يقرر Discourse ذلك بناءً على ما إذا كان الموقع يستخدم لغة من اليمين إلى اليسار (RTL) أم لا. لتعديل هذا، نحتاج إلى طريقة مختلفة في plugin-api لأن لوحة الهامبرغر هي عنصر تحكم (widget).
الطريقة التي سنستخدمها هي reopenWidget كما يلي:
api.reopenWidget("hamburger-menu", {
clickOutsideMobile() {
// تطبيق الكود من النواة
this._super(...arguments);
// ثم قم بالتعديل الخاص بك بحيث تغلق من الجانب الأيمن
const panel = document.querySelector(".menu-panel");
const windowWidth = document.body.offsetWidth;
panel.style.setProperty("--offset", `${windowWidth}px`);
}
});
ثم كل ما عليك فعله هو إضافة سطرين من CSS لتجاوز الأنماط الافتراضية لتلك القائمة كما يلي:
.hamburger-panel,
.user-menu {
.menu-panel.slide-in {
left: unset;
right: 0;
}
}
الآن لنجمع كل ذلك معًا. هذا يذهب إلى تبويب mobile > header في نسقك:
<script type="text/discourse-plugin" version="0.8">
api.modifyClass("component:site-header", {
pluginId: "right-side-mobile-hamburger",
_leftMenuClass() {
// لا نريد أي قوائم يسرى، لذا نرجع false
return false;
}
});
api.reopenWidget("hamburger-menu", {
clickOutsideMobile() {
// تطبيق الكود من النواة
this._super(...arguments);
// ثم قم بالتعديل الخاص بك بحيث تغلق من الجانب الأيمن
const panel = document.querySelector(".menu-panel");
const windowWidth = document.body.offsetWidth;
panel.style.setProperty("--offset", `${windowWidth}px`);
}
});
</script>
وهذا يذهب إلى تبويب mobile > CSS.
.hamburger-panel,
.user-menu {
.menu-panel.slide-in {
left: unset;
right: 0;
}
}
بمجرد حفظ النسق وتحديث الصفحة، ستفتح قائمة الهامبرغر وتغلق من الجانب الأيمن على الهاتف المحمول - تمامًا مثل قائمة المستخدم.
هذا هو أسلوب تقديم إجابة كاملة. أحسنت!
