如何将菜单更改为响应式引导菜单

const nav = document.querySelector(".navbar");
const blob = document.querySelector("svg.nav-blob");

function initiateBlob() {
    gsap.set(blob, {
        xPercent: -50,
        x: document.documentElement.clientWidth / 2
    });
}

nav.addEventListener("mousemove", function(e) {
    gsap.to(blob, {
        duration: 0.2,
        x: e.clientX,
        overwrite: 'auto'
    });
});
nav.addEventListener("mouseleave", function(e) {
    gsap.to(blob, {
        duration: 0.1,
        x: document.documentElement.clientWidth / 2,
        overwrite: 'auto'
    });

});

window.addEventListener('load', initiateBlob, false);
window.addEventListener('resize', initiateBlob, false);
window.addEventListener('orientationchange', initiateBlob, false);

body {
    font-family: "Open Sans Condensed";
    background: black;
}

h1 {
    font-family: "Open Sans Condensed";
    font-size: 2.2em;
    font-weight: 600;
}

.logo {
    max-width: 160px;
}

a.nav-link {
    color: black;
    text-decoration: none;
    font-size: 20px;
    font-family: "Roboto";
    font-weight: 600;
    color: #358E9D;
    text-transform: uppercase;
    padding: 10px 20px 20px 20px;
}

.navbar-nav .nav-link {
    padding-left: 1rem;
}

svg.nav-blob {
    position: absolute;
    top: 100%;
    left: 0;
    height: 20px;
    z-index: 1;
    display: none;
}

svg.nav-blob path {
    fill: white;
}

@media (min-width:768px) {
    .sr-md-only {
        position: absolute;
        left: -10000px;
        top: auto;
        overflow: hidden;
    }

    a.nav-link {
        line-height: 70px;
    }

    .nav-item {
        width: 6.75rem;
        text-align: center;
    }

    .navbar-expand-md {
        justify-content: space-evenly;
    }

    svg.nav-blob {
        display: block;
    }

    .card-img, .card-img-top {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Roboto:wght@300&display=swap" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>


    
<nav>
    <div>
        <a href="/"><img src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" alt="Logo image" /></a>

        <button type="button" aria-controls="navbarContent1 navbarContent2" aria-expanded="false" aria-label="Toggle navigation">
            <span></span>
        </button>

        <div>
            <ul>
                <li>
                    <a aria-current="page" href="#">HOME</a>
                </li>
                <li>
                    <a href="#">DINE</a>
                </li>
            </ul>
        </div>

        <div>
            <ul>
                <li>
                    <a href="#">HOTELS</a>
                </li>
                <li>
                    <a href="#">CONTACT</a>
                </li>
            </ul>
        </div>
        <svg viewBox="0 0 200 20">
            <path d="M0 0 C60 0 60 18 100 18 C140 18 140 0 200 0 Z"></path>
        </svg>
    </div>
</nav>

<div>
    <div>
        <div>
            <div>
                <img src="https://via.placeholder.com/670x395.png" alt="Placeholder image">
                <div>
                    <h2> HEADING ONE</h2>
                </div>
            </div>
        </div>
        <div>
            <div>
                <img src="https://via.placeholder.com/670x395.png" alt="Placeholder image">
                <div>
                    <h2>HEADING TWO</h2>
                    <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div>
    <div>
        <div>
            <p>Section to give height to the page.</p>
        </div>
    </div>
</div>