调整大小时修复侧边栏、导航栏和正文？

Question

我有两个问题，有两个 gif 来看看发生了什么，所以，首先，我有一个侧边栏，我添加了一些 javascript 代码，当我第一次点击按钮时，侧边栏工作正常，导航栏展开正如预期的那样，但是当我再次单击它时，您会看到左侧导航栏的开头再次重新展开，我需要它变得稳定：see this gif。

第二个问题：如何在调整窗口大小时创建动态主体和侧边栏？在这种情况下，当我调整窗口大小时，您会看到侧边栏覆盖了 HTML 正文的文本，例如菜单字体或文本，我该如何解决该问题？ see this gif。

custom.js

    // modify direction based on language
    let lang = location.search.split("=");
    let body = document.querySelector("body");
    let rtl_nav_dir = $(".rtl-nav")
    let rtl_dropdown = $(".rtl-dropdown")
    let sidebar = $("#sidebar"), wrapper = $('div.c-wrapper'), c_header = $(".c-header")

    // set class based on lang
    let menu_toggler = $(".c-menu-toggler")

    menu_toggler.each(function () {
        if (lang[1] !== "ar") {
            $(this).addClass("c-class-toggler")
        }
    })

    if (lang[1] === "ar") {
        body.style.direction = "rtl"
        $("body").children(":not(script)").css("text-align", "right")
        $("html:not([dir=rtl]) .c-sidebar-nav-icon:first-child").css("margin-left", "0")
        rtl_nav_dir.addClass("mr-auto").removeClass("ml-auto")
        rtl_dropdown.addClass(rtl_dropdown.className).removeClass("dropdown-menu-right")

        // change menu-bar position
        if ($(this).innerWidth() >= 992) {
            sidebar.addClass('rtl-sidebar')
            wrapper.addClass("rtl-mr-left")
            wrapper.addClass('rtl-width')

            menu_toggler.on('click', function () {
                // sidebar toggling
                let sidebar_target = $(this).data('target')
                let switch_key = false

                if (!$(sidebar_target).hasClass("rtl-sidebar-show") && switch_key === false) {
                    $(sidebar_target).addClass("rtl-sidebar-show")
                    wrapper.toggleClass("rtl-toggler")
                    switch_key = true
                } else {
                    $(sidebar_target).removeClass("rtl-sidebar-show")
                    wrapper.toggleClass("rtl-toggler")
                    switch_key = false
                }
            })
        }

        // resize windows
        $(window).on('resize', function () {
            if ($(this).innerWidth() >= 992) {
                sidebar.addClass('rtl-sidebar')
            }
        })
    }

});

HTML 代码：

<div id="sidebar" class="c-sidebar c-sidebar-fixed c-sidebar-lg-show">

    <div class="c-sidebar-brand d-md-down-none">
        <a class="c-sidebar-brand-full h4" href="#">
            samaa
        </a>
    </div>

    <ul class="c-sidebar-nav">
        <li class="c-sidebar-nav-item">
            <a href="http://samaa20520.herokuapp.com/admin" class="c-sidebar-nav-link">
                <i class="c-sidebar-nav-icon fas fa-fw fa-tachometer-alt">

                </i>
                لوحة التحكم
            </a>
        </li>
                    <li class="c-sidebar-nav-dropdown    ">
                <a class="c-sidebar-nav-dropdown-toggle" href="#">
                    <i class="fa-fw fas fa-users c-sidebar-nav-icon">

                    </i>
                    إدارة المستخدمين
                </a>
                <ul class="c-sidebar-nav-dropdown-items">
                                            <li class="c-sidebar-nav-item">
                            <a href="http://samaa20520.herokuapp.com/admin/permissions" class="c-sidebar-nav-link ">
                                <i class="fa-fw fas fa-unlock-alt c-sidebar-nav-icon">

                                </i>
                                الصلاحيات
                            </a>
                        </li>
                                                                <li class="c-sidebar-nav-item">
                            <a href="http://samaa20520.herokuapp.com/admin/roles" class="c-sidebar-nav-link ">
                                <i class="fa-fw fas fa-briefcase c-sidebar-nav-icon">

                                </i>
                                أدوار
                            </a>
                        </li>
                                                                <li class="c-sidebar-nav-item">
                            <a href="http://samaa20520.herokuapp.com/admin/users" class="c-sidebar-nav-link ">
                                <i class="fa-fw fas fa-user c-sidebar-nav-icon">

                                </i>
                                المستخدمين
                            </a>
                        </li>
                                                                <li class="c-sidebar-nav-item">
                            <a href="http://samaa20520.herokuapp.com/admin/audit-logs" class="c-sidebar-nav-link ">
                                <i class="fa-fw fas fa-file-alt c-sidebar-nav-icon">

                                </i>
                                Audit Logs
                            </a>
                        </li>
                                    </ul>
            </li>
                            <li class="c-sidebar-nav-item">
                <a href="http://samaa20520.herokuapp.com/admin/user-alerts" class="c-sidebar-nav-link ">
                    <i class="fa-fw fas fa-bell c-sidebar-nav-icon">

                    </i>
                    User Alerts
                </a>
            </li>
                            <li class="c-sidebar-nav-item">
                <a href="http://samaa20520.herokuapp.com/admin/cars" class="c-sidebar-nav-link ">
                    <i class="fa-fw fas fa-car c-sidebar-nav-icon">

                    </i>
                    Cars
                </a>
            </li>
                            <li class="c-sidebar-nav-item">
                <a href="http://samaa20520.herokuapp.com/admin/bookings" class="c-sidebar-nav-link ">
                    <i class="fa-fw fas fa-id-card-alt c-sidebar-nav-icon">

                    </i>
                    Booking
                </a>
            </li>
                            <li class="c-sidebar-nav-dropdown   ">
                <a class="c-sidebar-nav-dropdown-toggle" href="#">
                    <i class="fa-fw fas fa-address-card c-sidebar-nav-icon">

                    </i>
                    Drivers
                </a>
                <ul class="c-sidebar-nav-dropdown-items">
                                            <li class="c-sidebar-nav-item">
                            <a href="http://samaa20520.herokuapp.com/admin/packages" class="c-sidebar-nav-link ">
                                <i class="fa-fw fas fa-address-book c-sidebar-nav-icon">

                                </i>
                                Packages
                            </a>
                        </li>
                                                                <li class="c-sidebar-nav-item">
                            <a href="http://samaa20520.herokuapp.com/admin/subscribetions" class="c-sidebar-nav-link ">
                                <i class="fa-fw fas fa-cogs c-sidebar-nav-icon">

                                </i>
                                Subscribetion
                            </a>
                        </li>
                                                                <li class="c-sidebar-nav-item">
                            <a href="http://samaa20520.herokuapp.com/admin/activites" class="c-sidebar-nav-link ">
                                <i class="fa-fw far fa-calendar-check c-sidebar-nav-icon">

                                </i>
                                Activites
                            </a>
                        </li>
                                    </ul>
            </li>
                            <li class="c-sidebar-nav-dropdown   ">
                <a class="c-sidebar-nav-dropdown-toggle" href="#">
                    <i class="fa-fw fas fa-wrench c-sidebar-nav-icon">

                    </i>
                    App Setting
                </a>
                <ul class="c-sidebar-nav-dropdown-items">
                                            <li class="c-sidebar-nav-item">
                            <a href="http://samaa20520.herokuapp.com/admin/currencies" class="c-sidebar-nav-link ">
                                <i class="fa-fw fas fa-hand-holding-usd c-sidebar-nav-icon">

                                </i>
                                Currency
                            </a>
                        </li>
                                                                <li class="c-sidebar-nav-item">
                            <a href="http://samaa20520.herokuapp.com/admin/confs" class="c-sidebar-nav-link ">
                                <i class="fa-fw fas fa-cogs c-sidebar-nav-icon">

                                </i>
                                Global Config
                            </a>
                        </li>
                                                                <li class="c-sidebar-nav-item">
                            <a href="http://samaa20520.herokuapp.com/admin/countries" class="c-sidebar-nav-link ">
                                <i class="fa-fw fas fa-flag c-sidebar-nav-icon">

                                </i>
                                Countries
                            </a>
                        </li>
                                    </ul>
            </li>
                            <li class="c-sidebar-nav-item">
                <a href="http://samaa20520.herokuapp.com/admin/wallets" class="c-sidebar-nav-link ">
                    <i class="fa-fw fas fa-wallet c-sidebar-nav-icon">

                    </i>
                    Wallets
                </a>
            </li>
                            <li class="c-sidebar-nav-item">
                <a href="http://samaa20520.herokuapp.com/admin/profiles" class="c-sidebar-nav-link ">
                    <i class="fa-fw fas fa-user c-sidebar-nav-icon">

                    </i>
                    Profile
                </a>
            </li>
                            <li class="c-sidebar-nav-item">
                <a href="http://samaa20520.herokuapp.com/admin/listprofiles" class="c-sidebar-nav-link ">
                    <i class="fa-fw fas fa-users c-sidebar-nav-icon">

                    </i>
                    Profiles
                </a>
            </li>
                            <li class="c-sidebar-nav-item">
                <a href="http://samaa20520.herokuapp.com/admin/messenger" class=" c-sidebar-nav-link">
                    <i class="c-sidebar-nav-icon fa-fw fa fa-envelope">

                    </i>
                    <span>رسائل</span>
                    
                </a>
            </li>
                                                <li class="c-sidebar-nav-item">
                        <a class="c-sidebar-nav-link " href="http://samaa20520.herokuapp.com/profile/password">
                            <i class="fa-fw fas fa-key c-sidebar-nav-icon">
                            </i>
                            تغيير كلمة المرور
                        </a>
                    </li>
                                        <li class="c-sidebar-nav-item">
                <a href="#" class="c-sidebar-nav-link" onclick="event.preventDefault(); document.getElementById('logoutform').submit();">
                    <i class="c-sidebar-nav-icon fas fa-fw fa-sign-out-alt">

                    </i>
                    تسجيل الخروج
                </a>
            </li>
    </ul>

</div>
    <div class="c-wrapper">
        <header class="c-header c-header-fixed px-3">
            <button class="c-header-toggler d-lg-none mfe-auto" type="button" data-target="#sidebar" data-class="c-sidebar-show">
                <i class="fas fa-fw fa-bars"></i>
            </button>
            <a class="c-header-brand d-lg-none" href="#">samaa</a>
            <button class="c-header-toggler c-menu-toggler mfs-3 d-md-down-none" type="button" data-target="#sidebar" data-class="c-sidebar-lg-show" responsive="true">
                <i class="fas fa-fw fa-bars"></i>
            </button>

            <ul dir="rtl" class="c-header-nav rtl-nav ml-auto rtl-mr-auto">
                <li class="c-header-nav-item dropdown d-md-down-none">
                    <a class="c-header-nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                        AR
                    </a>
                    <div class="dropdown-menu dropdown-menu-right rtl-dropdown">
                        <a class="dropdown-item" href="http://samaa20520.herokuapp.com/admin?change_language=en">EN (English)</a>
                        <a class="dropdown-item" href="http://samaa20520.herokuapp.com/admin?change_language=ar">AR (Arabic)</a>
                        <a class="dropdown-item" href="http://samaa20520.herokuapp.com/admin?change_language=fr">FR (French)</a>
                    </div>
                </li>
                <ul class="c-header-nav ml-auto">
                    <li class="c-header-nav-item dropdown notifications-menu">
                        <a href="#" class="c-header-nav-link" data-toggle="dropdown">
                            <i class="far fa-bell"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right rtl-dropdown">
                            <div class="text-center">
                                لا يوجد تحذيرات
                            </div>
                        </div>
                    </li>
                </ul>
            </ul>
        </header>

        <div class="c-body">
            <main class="c-main">
                <div class="container-fluid">
                    <div class="content">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-header">
                                    Dashboard
                                    </div>

                                    <div class="card-body">

                                    You are logged in!
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </main>
            <form id="logoutform" action="http://samaa20520.herokuapp.com/logout" method="POST" style="display: none;">
                <input type="hidden" name="_token" value="R9pX3AdBbFSXQRNDakg2ssFDYQfKgHiMA5ZodFcq">
            </form>
        </div>
    </div>

custom.css

.rtl-dropdown {
    left: auto;
    right: -410%;
    direction: ltr;
}
.rtl-sidebar {
    right: 0;
}
.rtl-mr-left {
    margin-right: 18% !important;
    margin-left: 0 !important;
}
.rtl-width {
     max-width: 82% !important;
     right: 100% !important;
}
.rtl-toggler {
    margin-right: 0 !important;
    max-width: 100% !important;
    left: 0 !important;
}
.rtl-sidebar-show {
    margin-right: -20% !important;
}