event binding issues using livewire-turbolinks.js Laravel9

So i have the following code in my main js file for an app in Laravel9:

$(document).ready(function() {
    let isClosed = false;

    $('.hamburger').on( 'click', '#main', function () {
        hamburger_cross();
    });

    function hamburger_cross() {

        if (isClosed == true) {
            $('.overlay').hide();
            $('.hamburger').removeClass('is-open');
            $('.hamburger').addClass('is-closed');
            isClosed = false;
        } else {
            $('.overlay').show();
            $('.hamburger').removeClass('is-closed');
            $('.hamburger').addClass('is-open');
            isClosed = true;
        }
    }

    $('[data-toggle="offcanvas"]').on('click', '#main', function () {
        $('#wrapper').toggleClass('toggled');
    });

});

When i do not have the code section in my layout/master.blade.php the menu can be toggled but when i use the code the majority of the app works very well but this sidemenu won't toggle. The snippet at the and of the layout is this:

        <script type="module">
            import hotwiredTurbo from 'https://cdn.skypack.dev/@hotwired/turbo';
        </script>
        <script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks@v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false" data-turbo-eval="false"></script>

the snippet is directly above the end of my body section.

in this same file near the top is the hamburger itself:

        <div id="main">
            <!-- ......... Other Content ............ -->
            <!-- Page Content -->
            <main id="wrapper">
                <div class="overlay"></div>

                <!-- Sidebar -->
                @livewire('sidebar')
                <button type="button" class="hamburger animated fadeInLeft is-closed" data-toggle="offcanvas">
                    <span class="hamb-top"></span>
                    <span class="hamb-middle"></span>
                    <span class="hamb-bottom"></span>
                </button>
                <!-- /#sidebar-wrapper -->
                <!-- ........ Other Content ........... -->
            </main>
        </div>

I believe I can bind to the body or document but do not know how to apply this. There is no impact on pretty much everything else with using turbolinks but i do have another related issue where I have some drag and dropping which involves ajax calls and recreating elements (this wasn't working before I used turbolinks, reloading the page fixes it) but i believe it is the same issue in that the event has lost its binding. I have used $( document ).ready( function() {} in this section too but for another day!

So how can i make a binding that isn't lost when parts of the page are re-created?

thanks