لماذا sidebar يظهر مفتوح بشكل تلقائي ؟

مرحبًا عبد الواحد.

سأشرح لك الفكرة، و سأترك لك تجربة الأكواد و إن لم تنجح أخبرني و سأقوم بمساعدتك.

حتى تجعل ال sidebar مخفي بصورة افتراضية، نقوم بإعطائه margin بقيمة سالبة، إذا كان ال sidebar في جهة اليمين و عرضه 17rem مثلًا نقوم بإعطائه margin:right بقيمة 17rem- و عند الضغط على الزر نقوم بتعديل قيمة هذا ال margin إلى صفر.

هل يبدو لك هذا الأمر مألوفًا؟ هل تذكر كيف قمنا ببناء هذه الخاصية لل sidebar في موقع يوتيوبي سابقًا؟ يمكنك الآن العودة إلى هذا الدرس و مراجعته و ستفهم هذا الدرس الآن بصورة أفضل و ستثبت المعلومة لديك.

إذا واجهتكأي مشاكل أخبرني و سأقوم بمساعدتك.

أتمنى لك التوفيق.

مرحبًا @عبد الواحد الحدادي, 

في بناء sidebar تُفتح و تُقغل يقوم المبرمج بتجهيز كِلا الحالتين و واحدة منهم تكون الخيار التلقائي , لقد ذهبت انا للرابط الذي ارسلتها ثم فتحت Inspector على sidebar لمعرفة كيف تعمل , وجدت انه عند فتح و قفل sidebar هذه : عنصر div مع wrapper" id" لديه صنف  (class) يتغير و هو toggled عندما تكون sidebar مفتوخة يحمل عنصر div هذا الصنف toggled و عندما تُغلق sidebar تقوم جافا سكريبت بحذف الصنف toggled  :

<div id="wrapper" class="toggled">
            <!-- Sidebar -->
            <div id="sidebar-wrapper">
                <ul class="sidebar-nav">
                    <li class="sidebar-brand"> <a href="#"> Start Bootstrap </a> </li>
                    <li> <a href="#">Dashboard</a> </li>
                    <li> <a href="#">Shortcuts</a> </li>
                    <li> <a href="#">Overview</a> </li>
                    <li> <a href="#">Events</a> </li>
                    <li> <a href="#">About</a> </li>
                    <li> <a href="#">Services</a> </li>
                    <li> <a href="#">Contact</a> </li>
                </ul>
            </div> <!-- /#sidebar-wrapper -->
            <!-- Page Content -->
            <div id="page-content-wrapper">
                <div class="container-fluid">
                    <h1>Simple Sidebar</h1>
                    <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
                    <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
                </div>
            </div> <!-- /#page-content-wrapper -->
        </div>

لجعل هذا sidebar يبدأ مغلقً عليك بإزالت الصنف toggled من العنصر div من wrapper" id"

<div id="wrapper">

المشكلة تكمن في هذا السطر:

<div id="wrapper" class="toggled">

الصف toggled عندما يكون موجوداً يكون sidebar ظاهراً وعندما لا يكون يختفي sidebar ، هذا تم تحقيقه بالـCSS ومن خلال الجافاسكريبت نضيف هذا الصف أو نزيله عند الضغط على زر navigation.

عند تحميل الصفحة المستعرض سيجد الصف toggled مطبقاً على wrapper div والذي يعني إظهار sidebar، كل ما عليك فعله ﻹخفائه عند تحميل الصفحة حيث لا يظهر إلا بالضغط على زر navigation هو تغيير السطر أعلاه إلى:

<div id="wrapper">

بالمناسبة وجدت أخطاءً في كودك ليس لها علاقة بمشكلتك ولكن للنصيحة فقط:

1- أنت تضم مكتبتي jquery وbootstrap.min.js مرتين مرة من CDN ومرة من مجلد js ، إكتف بإحداهما ولا تنس وضع jquery قبل bootstrap.min.js ﻷن الـbootstrap يستخدم jquery.

2- كود الـcss دمج به الـbootstrap وكودك الخاص، لا داعي لدمج كود الـbootstrap بكود CSS أبداً.

3- آخر نسخة للـbootstrap هي 4.5.3 والنسخة التي تستعملها قديمة

4- يمكنك ضم نسخة rtl من bootstrap دون اللجوء لدمجه داخل كودك تماماً كما تضم أي ملف CSS من CDN أو مجلد وللعلم تجد نسخة bootstrap-rtl هنا https://github.com/MahdiMajidzadeh/bootstrap-v4-rtl ، عندما يصير bootstrap 5 مستقراً لن تحتاج إلى bootstrap-rtl ﻷن فريق bootstrap الفريد سيدعم RTL.

5- أين عنصر head ؟!!! وأين body ؟!!! 

مرحبا بكم إخواني / أخواتي؛ 

شكراً لكم جميعاً، لقد حلت المشكلة باتباع كل تعليماتك . 

تحياتي لك .