Navbar Toggler 正在关闭点击屏幕上的任意位置

Question

我的导航栏中有一个下拉菜单。当我调整屏幕大小并使其变小时，会出现导航栏切换按钮，当我单击它时，导航栏菜单会在屏幕左侧打开。在这种情况下我无法打开下拉菜单，因为如果我单击任何软件，那么每当我单击下拉菜单打开它时，导航栏菜单就会自动关闭，菜单会自动关闭。我也附上图片。

这是代码

<nav>
    <div class="nav-bar">
        <i class='bx bx-menu sidebarOpen'></i>
        <span class="logo navLogo"><a href="index.php"><img src="assets/img/ismailtvlogo.png" width="80"></a></span>

        <div class="menu">
            <div class="logo-toggle">
                <span class="logo"><a href="index.php"><img src="assets/img/ismailtvlogo.png" width="80"></a></span>
                <i class='bx bx-x siderbarClose'></i>
            </div>

            <ul class="nav-links">
                <li><a href="index.php">Home</a></li>

                <div class="dropdown ml-3 mr-2">

                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
                            <ul class="dropdown-menu multi-column columns-2">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <ul class="multi-column-dropdown">
                                            <li><a href="#">Fact & Mystery</a></li>
                                            <li><a href="#">History</a></li>
                                            <li><a href="#">Earning</a></li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-6">
                                        <ul class="multi-column-dropdown">
                                            <li><a href="#">Fashion & Style</a></li>
                                            <li><a href="#">Tech</a></li>
                                            <li><a href="#">Health</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </ul>
                    </div>

                <li><a href="pages/about.php">About</a></li>
                <li><a href="pages/privacy-policy.php">Privacy Policy</a></li>
                <li><a href="pages/disclaimer.php">Disclaimer</a></li>
                <li><a href="comment/index.php">Contact</a></li>
            </ul>
        </div>

        <div class="darkLight-searchBox">
            <div class="searchBox">
                <div class="searchToggle">
                    <!--                     <i class='bx bx-x cancel'></i>
                    <i class='bx bx-search search'></i> -->
                </div>

                <!--                     <div class="search-field">
                        <input type="text" id="search" placeholder="Search...">
                        <i class='bx bx-search'></i>
                    </div> -->
            </div>
        </div>
    </div>
</nav>

<script>
const body = document.querySelector("body"),
    nav = document.querySelector("nav"),
    modeToggle = document.querySelector(".dark-light"),
    searchToggle = document.querySelector(".searchToggle"),
    sidebarOpen = document.querySelector(".sidebarOpen"),
    siderbarClose = document.querySelector(".siderbarClose");

let getMode = localStorage.getItem("mode");
if (getMode && getMode === "dark-mode") {
    body.classList.add("dark");
}

// js code to toggle search box
searchToggle.addEventListener("click", () => {
    searchToggle.classList.toggle("active");
});


//   js code to toggle sidebar
sidebarOpen.addEventListener("click", () => {
    nav.classList.add("active");
});

body.addEventListener("click", e => {
    let clickedElm = e.target;

    if (!clickedElm.classList.contains("sidebarOpen") && !clickedElm.classList.contains("menu")) {
        nav.classList.remove("active");
    }
});
</script>

我希望导航栏菜单不应该在点击屏幕上的任何软件时关闭，只要我点击关闭 (✖)