تغییر حالت navbar

سلام دوستان گرامی
Navbar سایتم در حالت موبایل به صورت عکس زیر از بالا باز میشه

همانند لینک مقابل این لینک
میخوام به جای از بالا ، از راست باز بشه
همانند اینک مقابل این لینک
وقتی از راست باز میشه ارتفاع کامل و عرض 60 درصد باشه و صفحه زیرین تیره شده و اسکرول نشه

این کد html هست

<!-- Navbar Start -->
    <nav class="navbar navbar-expand-lg bg-white navbar-light">
        <a href="" class="px-9">
            <h1 class="logo"><img src="" alt="" width="60" height="40"></h1>
        </a>
        <button type="button" class="navbar-toggler me-4" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav ms-auto p-3">
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">منو1</a>
                    <div class="dropdown-menu rounded-0 rounded-bottom m-0">
                        <a href="#" class="dropdown-item">زیر منو1</a>
                        <a href="#" class="dropdown-item">زیر منو1</a>
                        <a href="#" class="dropdown-item">زیر منو1</a>
                        <a href="#" class="dropdown-item">زیر منو1</a>
                    </div>
                </div>
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">منو2</a>
                    <div class="dropdown-menu rounded-0 rounded-bottom m-0">
                        <a href="" class="dropdown-item">زیر منو2</a>
                        <a href="" class="dropdown-item">زیر منو2</a>
                        <a href="" class="dropdown-item">زیر منو2</a>
                    </div>
                </div>
                <a href="" class="nav-item nav-link">منو3</a>
                <a href="" class="nav-item nav-link">منو4</a>
                <a href="" class="nav-item nav-link">منو5</a>
                <a href="" class="nav-item nav-link">منو6</a>
                <a href="" class="nav-item nav-link">منو7</a>
                <a href="" class="nav-item nav-link">منو8</a>

            </div>
            <a href="" class="btn btn-primary1 rounded-0 py-4 px-lg-5 d-none d-lg-block">خانه<i class="fa fa-arrow-right ms-3"></i></a>
        </div>
    </nav>
<!-- Navbar End -->

میدونم که از مسیر زیر دستور میگیره
npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js

این هم لین دانلود bootstrap.bundle.min.js
لینک دانلود
ممنون میشم اگه کسی بتونه کمکی کنه تا به منظورم برسم