يستبدل هذا التعديل نظام قائمة الرأسية الأفقي القياسي بنظام قائمة الأعمدة الجانبية مع تمكين المستخدم من تحديد عرضه إما على يمين الشاشة أو يسارها.

يتضمن التعديل 4 مكونات:
1. حقل مستخدم مخصص - للسماح للمستخدم بتحديد الجانب الأيمن من شاشة عرض القائمة ، يكون الإعداد الافتراضي هو اليسار
2. تغيير إلى إعداد واحد - لجعل القائمة الفرعية لزجة عبر الجزء العلوي من الصفحة
3. قالب المغلق الجديد - لضبط معلمات العرض من قائمة العمود الجانبي
4. قالب PAGE_CONTAINER معدّل - لإنشاء العمود الجانبي وعرض القائمة الرئيسية

ملاحظات:
1. هذا مجاني للاستخدام لكنه لا يزال مملوكًا لي. هذا لمنع أي شخص من فرض رسوم على أي شخص آخر مقابل ذلك أو مكوناته ... لقد أصدرت هذا لمساعدة الآخرين إذا كانوا يرغبون في استخدامه وليس لأغراض تجارية
2. أنا لست مطورًا ، لذا يمكنني المساعدة متى استطعت وكيف يمكنني مع ذلك آمل أن نتمكن جميعًا من مساعدة بعضنا البعض في تحسين هذا التعديل لمصلحة الجميع ، لذا ، إذا قمت بتغيير أي شيء فيه ، فأعلم الآخرين .
3. بسبب الحاجة إلى تعديل قالب PAGE_CONTAINER ، قد يكون هناك تأثيرات على الوظائف الإضافية الأخرى التي تقوم تلقائيًا بالكتابة فوق العناصر في قالب PAGE_CONTAINER. من المهم ملاحظة أن التغييرات التي أجريتها على PAGE_CONTAINER يتم تعليقها بدءًا من "IB" في القالب
4. لقد تم اختبار هذا على تثبيت XF قياسي مع النمط الافتراضي ، قد تؤثر أنماط الجهة الخارجية على هذا التعديل

الخطوة 1 - إضافة حقل مستخدم مخصص
ا. في ACP (لوحة تحكم المشرف) ، انتقل إلى المستخدمين -> حقول مستخدم مخصصة ثم "إضافة حقل"
ب. أكمل هذه الحقول:
معرف الحقل = menu_position
العنوان = موقف القائمة
عرض الموقع = تفضيلات
نوع الحقل = خانات الاختيار
* ثم تحت "خيارات لحقول الاختيار" *
الخيارات الممكنة:
القيمة = 1
النص = اليمين
* ثم تحت "الخيارات العامة" حدد ما تريد *
انقر فوق "حفظ" لحفظ الحقل المخصص

الخطوة 2 - تغيير الإعداد "التنقل الملصقة"
ا. في ACP ، انتقل إلى المظهر -> خصائص النمط ، ثم حدد "الرأس والتنقل"
ب. حدد خيار "عنصر التنقل اللاصق" إلى "صف التنقل الأساسي فقط"

الخطوة 3 - إنشاء قالب المغلق الجديد ملاحظة - يجب أن يسمى nav_side_menu.less
ا. في ACP ، انتقل إلى المظهر -> القوالب وانقر فوق إضافة قالب
ب. أدخل في حقل اسم القالب nav_side_menu.less
ج. انسخ ملف css التالي والصقه في مربع الرمز أسفل حقل اسم القالب

CSS:
@media (min-width: 651px) {
    .menu_right {margin-right:72px;}
    .menu_left {margin-left:72px;}

    .p-navSticky {
        position: fixed !important;
        width: 72px;
        top: 0 !important;
        right: 0;
        bottom: 0 !important;
        overflow: auto;
        background: #fff;
        box-shadow: 0 0 8px 3px rgba(0,0,0,0.3);
    }

    .side_menu_sticky{
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 99;
    }

    .side_left_nav.p-navSticky {
        left: 0;
        z-index: 1000;
    }

    .p-nav-list>li , .p-navgroup-link , .p-nav-inner{
        display: block;
    }

    .p-navgroup , .p-navgroup-link {
        float: none;
        text-align: center;
    }

    .p-nav-list .p-navEl.is-selected .p-navEl-link , .p-nav-list .p-navEl-link , .p-navgroup-link {
        width: 100%;
        text-align: center;
        color: #185886;
        font-size: 11px;
    }
    .p-nav-list .p-navEl-link--splitMenu, .p-nav-list .p-navEl-splitTrigger {
        width: 100%;
        text-align: center;
        padding: 8px 0 8px 2px !important;
        font-size: 11px;
        font-family: 'Droid Sans', sans-serif;
    }

    .p-nav-list .p-navEl-splitTrigger  {
        width: 25%;
        color: #185886;
        font-size: 13px;
        text-align: center;
    }

    .p-navgroup {
        background: none;
    }

    .p-nav-opposite {
        text-align: center;
        margin-right: 0px;
    }
    .p-nav {
        color: #185886;
        background: transparent;
    }
    .p-navgroup-link.badgeContainer {
        font-size: 13px;
    }
  
    .p-navSticky--primary.is-sticky .p-nav-list .p-navEl-link.p-navEl-link--splitMenu ,
    .p-nav-list .p-navEl-link.p-navEl-link--splitMenu {
        padding-right: 15px;
    }
    .menu--account {
        top: 0px !important;
    }
  
    [data-load-target=".js-convMenuBody"] {
        top: 40px !important;
    }
  
    [data-load-target=".js-alertsMenuBody"] {
        top: 74px !important;
    }
  
    .menu--account , [data-load-target=".js-convMenuBody"] , [data-load-target=".js-alertsMenuBody"]  {
        right: 72px !important;
        left: initial !important;
    }
  
    .menu.menu--structural.side_search_menu {
        right: 72px !important;
        left: initial !important;
        margin-top: -30px;
    }
  
    .menu_position_left .menu--account , .menu_position_left [data-load-target=".js-convMenuBody"]
    , .menu_position_left [data-load-target=".js-alertsMenuBody"] , .menu_position_left .menu.menu--structural.side_search_menu  {
        left: 72px !important;
    }
    .p-navgroup-link.badgeContainer:after {
        left: 45px;
    }
    .badgeContainer:after {
        word-break: break-all;
        margin-right: 1px !important;
    }
    a.p-navgroup-link.p-navgroup-link--iconic.p-navgroup-link--whatsnew , .p-nav-list .p-navEl-splitTrigger
    , span.menu-arrow , .hScroller-action ,.p-navgroup-link.p-navgroup-link--iconic .p-navgroup-linkText, .p-navgroup-link.p-navgroup-link--textual i ,
    .p-navSticky--primary.is-sticky .p-nav-list .p-navEl.is-selected .p-navEl-splitTrigger  , .p-nav-scroller .hScroller-action.hScroller-action--end{
        display: none !important;
    }
    .p-sectionLinks-list .p-navEl-link.p-navEl-link--splitMenu {
        padding-right: 6px;
    }
    .p-navgroup-link--iconic i {
        font-size: 18px;
    }
    .p-navgroup-link {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .p-navgroup-link:hover ,.p-nav-list .p-navEl:not(.is-selected):not(.is-menuOpen):hover,
    .p-nav-list .p-navEl:not(.is-selected):not(.is-menuOpen) .p-navEl-link:hover,
    .p-nav-list .p-navEl:not(.is-selected):not(.is-menuOpen) .p-navEl-splitTrigger:hover {
        background: rgb(199, 221, 243);
    }
    .p-navgroup.p-discovery {
        margin-left: 0em;
    }
    .p-navgroup-link {
        border-left: 0px solid rgba(20, 20, 20, 0.15);
    }
    .p-nav-list .p-navEl-link {
        padding: 8px 5px;
        white-space: normal;
    }
    .p-navgroup-link.p-navgroup-link--user .avatar {
        width: 32px;
        height: 32px;
        font-size: 19px;
        line-height: 32px;
    }
}

@media (max-width: 650px) {
    .menu_right {margin-right: 0px;}
    .menu_left {margin-left: 0px;}
د. انقر فوق حفظ وإنهاء

الخطوة 4 - تعديل قالب PAGE_CONTAINER
ا. في ACP ، انتقل إلى المظهر -> القوالب ، ابحث عن قالب PAGE_CONTAINER وانقر فوقه لفتح
ب. لاحظ أي تغييرات قد تكون أجريتها يدويًا على هذا القالب حيث ستحتاج إلى إضافتها بعد ذلك
د. انسخ الكود في الملف النصي PAGE_CONTAINER المرفق ولصقه على جميع الكود الموجود في القالب:
ملاحظة - ستلاحظ التغييرات التي أجريتها
ه. انقر فوق حفظ وإنهاء

اختبار اختبار اختبار

استمتع وأتمنى أن يساعدك ذلك ، واسمحوا لي أن أعرف أفكارك وحتى الموقع الذي أضفته إليه حتى أتمكن من رؤيته ... شكرًا