Primary Navigation Drawer

<div id="primary-navigation-drawer" class="primary-navigation-drawer offcanvas offcanvas-end bg-secondary">
    <div class="offcanvas-header align-items-start justify-content-end">
        <h2 class="visually-hidden">Primary navigation</h2>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" data-bs-target="#primary-navigation-drawer" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div class="primary-navigation bg-secondary text-primary pt-2 px-3">
            <nav role="navigation">
                <ul class="menu list-unstyled">
                    <li class="menu-item pb-2">
                        <a class="btn btn-outline-primary d-block" href="#" title="About">About</a>
                    </li>
                    <li class="menu-item pb-2">
                        <a class="btn btn-outline-primary d-block" href="#" title="Find us">Find us</a>
                    </li>
                    <li class="menu-item pb-2">
                        <a class="btn btn-outline-primary d-block" href="#" title="How to book">How to book</a>
                    </li>
                    <li class="menu-item pb-2">
                        <a class="btn btn-outline-primary d-block" href="#" title="Our bar">Our bar</a>
                    </li>
                    <li class="menu-item pb-2">
                        <a class="btn btn-outline-primary d-block" href="#" title="Accessibility">Accessibility</a>
                    </li>
                    <li class="menu-item pb-2">
                        <a class="btn btn-outline-primary d-block" href="#" title="Terms & conditions">Terms & conditions</a>
                    </li>
                    <li class="menu-item pb-2">
                        <a class="btn btn-outline-primary d-block" href="#" title="FAQs">FAQs</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>