CSS + Javascript Navbar Collapse (No bootstrap)

So I have written this navbar code with pure HTML/SASS and am now kinda facing a roadblock to add a collapse element to the navigation.

I have tried several answers here on stack but still couldn't find one that gets me going..

Therefore I have decided to ask for your valuable help.

So this is what I have now:

html/php

<!-- NAVBAR -->
        <div class="navbar-wrapper">
            <!-- SITE LOGO -->
            <div class="site-branding">
                <a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><img class="logo" src="<?php echo get_template_directory_uri(); ?>/assets/img/logo-white.png" alt="<?php bloginfo('name'); ?>" /></a>
            </div>
            <!-- END SITE LOGO -->

            <!-- SITE NAV -->
            <nav id="site-navigation" class="main-navigation">
                <?php
                // Header Menu - > Defined in functions.php
                wp_nav_menu(
                    array(
                        'theme_location' => 'header-menu',
                        'menu_id' => 'header-nav',
                    )
                );
                ?>
            </nav>
            <!-- END SITE NAV -->
        </div>
<!-- END NAVBAR -->

SCSS

.navbar-wrapper {
    @include flex(center);
    flex-direction: row;
    width: 100%;
    padding: 8.6rem 0 8.6rem;

    .site-branding {
        flex-grow: 1;
    }

    #site-navigation {
        #header-nav {
            @include flex(center);
            list-style: none;
            margin: 0;
            padding: 0;

            li>a {
                text-decoration: none;
                cursor: pointer;
                letter-spacing: 0.014rem;
                padding: 0 2rem;
                color: $white;
                font-size: 1.8rem;
                font-family: $subtitle-font;

                &:hover {
                    color: $color-primary
                }
            }

        }
    }
}

The result I am trying to obtain is something like in the image below:

any help will be much appreciated!