Wrap divs around wp_nav_menu

I and building a custom responsive menu and am having trouble integrating my custom mobile menu functionality. I have this code for the desktop menu:

            <div class="d-none d-sm-none d-md-block">
                <?php
                    wp_nav_menu(
                        array(
                            'theme_location'  => 'primary',
                            'container_class' => 'collapse navbar-collapse',
                            'container_id'    => 'navbarNavDropdown',
                            'menu_class'      => 'navbar-nav ml-auto',
                            'fallback_cb'     => '',
                            'menu_id'         => 'main-menu',
                            'depth'           => 2,
                            'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
                        )
                    );
                ?>
            </div><!-- end d-none etc --> 

            <!-- end desktop menu --> 

This works great, however when I tried to incorporate this to my mobile menu, I’m unable to integrate the div structure that provides my mobile functionality. How do I integrate this code into my wp_nav_menu array?

note: this works well on its own, but I’m unable to get the sub nav tabs in, hence why I want to use nav walker.

    <div id="mySidenav" class="sidenav">
        <ul id="menu">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                    <?php $nav_links = wp_get_nav_menu_items('main-menu'); ?>
                    <?php if ($nav_links):  ?>
        <ul>
        <?php foreach ($nav_links as $link): ?>
        <li>
        <a href="<?php echo $link->url; ?>"><?php echo $link->title; ?></a>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>
</ul>
</div><!-- end side nav -->