Convert a custom bootsrap based menu to wordpress nav walker

The easier way is to use Wp Bootstrap Navwalker script here: https://github.com/wp-bootstrap/wp-bootstrap-navwalker.

It’s already built to handle all the Bootstrap to WordPress dynamic styling. All you would need to do is include file in your functions.php file.

require_once get_template_directory() . '/wp-bootstrap-navwalker.php';

And add the php code to the Bs Navbar links area of the code.

 <div class="wrapper">

    <nav id="sidebar">
        <!-- Sidebar Header -->
        <div class="sidebar-header">
            <h3>Collapsible Sidebar</div>
        </div>

        <!-- Sidebar Links -->
          <?php
                wp_nav_menu( array(
                  'theme_location'    => 'main-menu',
                  'depth'             => 2,
                  'menu_class'        => 'list-unstyled components',
                  'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                  'walker'            => new wp_bootstrap_navwalker())
                );
              ?>
    </nav>

    <div id="content">
        <button type="button" id="sidebarCollapse" class="navbar-btn">
            <span></span>
            <span></span>
            <span></span>
        </button>
    <div>

The Wp-bootstrap-navwalker should handle the rest.

Play around with it and see. It should make your work easier.